Как удалить загруженное изображение в Javascript?

Question

Я работаю над своим первым веб-приложением. Это позволяет пользователям публиковать события, происходящие в этом районе, похожие на eventbrite. Я использую NodeJS, Express, Mongo.

Я создал форму, которая позволяет пользователям вводить сведения о мероприятии и загружать изображение, относящееся к событию.

Это выглядит следующим образом:

Если пользователь загружает изображение затем передает, я успешно удалось сохранить изображение. Когда пользователь хочет просмотреть отправленное событие, появится изображение.

Моя проблема заключается в следующем:

1. Пользователь заполняет форму и загружает изображение
2. Пользователь решает, что он не хочет, чтобы изображение, связанное с событием
3. Пользователь нажимает удалить изображение (изображение появляется для удаления - т. е. предварительный просмотр изображения серый и говорит: «Отбросьте изображение здесь или нажмите, чтобы загрузить»)
   4. Пользователь отправляет событие.
   5. Пользователь просматривает событие. «Удаленное» изображение есть. Другими словами, изображение никогда не удалялось.

Я не могу показаться, чтобы выяснить, как на самом деле удалить изображение, как только его загрузки.

Вот мой EJS Файл:

<input name="image" type="file" id="image" accept="image/*" style="display:none" 
onchange="handleFiles(this.files)"> 

<div id="imageBorder" > 
     <div id="imageContainer"> 
      <div id="dropbox"> 
       <i class="fa fa-picture-o" aria-hidden="true"></i> 
       <p> Drop image here or click to upload</p> 
      </div> 
      <div id="preview" class="hidden"> 
      </div> 
      <button id="fileSelect" class="btn btn-primary btn-block">Upload Image</button> 
      <button id="fileRemove" class="btn btn-primary btn-block">Remove Image</button> 

     </div> 
    </div> <!-- END OF imageBorder --> 

Обратите внимание, что у меня есть две дивов в imageContainer, предварительный просмотр DIV, который скрыт, и раздаточные дела.

Теперь вот мой .js файл:

function eventImageSetup() { 
    var dropbox = document.getElementById("dropbox"), 
     fileElem = document.getElementById("image"), 
     fileSelect = document.getElementById("fileSelect"), 
     fileRemove = document.getElementById("fileRemove"); 
    $(dropbox).height($('#imageBorder').height()); 
    fileSelect.addEventListener("click", function(e) { 
     if (fileElem) { 
      fileElem.click(); 
      e.preventDefault(); // to prevent submit 
     } 
    }, false); 
    fileRemove.addEventListener("click", function(e) { 
     e.preventDefault(); // prevent submit 
     if(!$('#preview').hasClass('hidden')) { // If there is an image uploaded 
      $('#preview').empty(); 
      $('#dropbox').removeClass('hidden'); 
      $('#preview').addClass('hidden'); 
      $('#fileSelect').text('Upload Image'); 
     } 
     removeError($('#imageError'), $('#image')); 
    }); 
    dropbox.addEventListener("dragenter", dragenter, false); 
    dropbox.addEventListener("dragover", dragover, false); 
    dropbox.addEventListener("drop", drop, false); 
} 
.... 
.... 
function handleFiles(files) { 
    var file = files[0]; 
    ... //some code for error checking here - deleted it for now 
    var img = document.createElement("img"); 
    img.id = "uploadedImage"; 
    img.file = file; 
    img.onload = function() { 
     adjustImageSize(img); 
    }; 

    $('#dropbox').addClass('hidden'); 
    $('#preview').removeClass('hidden'); 
    $('#preview').empty(); 
    $('#preview').append(img); 
    $('#fileSelect').text('Replace Image'); 

    var reader = new FileReader(); 
    reader.onload = (function(aImg) { 
     return function(e) { 
      aImg.src = e.target.result; 
     }; 
    })(img); 
    reader.readAsDataURL(file); 
} 

В основном, на переднем конце, когда пользователь загружает изображение, изображение тега создается и вставляется в окне предварительного просмотра. Класс «скрытый» удаляется из предварительного просмотра, а класс «скрытый» добавляется в dropbox. Следовательно, изображение появляется.

При удалении изображения удаляется из предварительного просмотра, предварительный просмотр скрыт, а класс «скрыт» удаляется из dropbox. I.e, кажется, что изображение было удалено.

ОДНАКО, как только форма отправлена, req.file НЕ пуст.

Это часть файла маршрутов узла (я использую multer для загрузки изображений - не имеет значения)

router.post("/", middleware.isLoggedIn, upload.single('image'), function(req,res) { 

    var filepath = undefined; 
    if(req.file) { // THIS IS TRUE... REQ.FILE is not empty.... 
     filepath = req.file.path.substr(7); // Substr to remove "/public" 
    } 
    .... 
    .... 
} 

Кто-нибудь есть какие-либо предложения? Я бы хотел понять, что происходит, когда я говорю reader.readDataAsURL (я думаю, что это то, что сохраняет файл ???) Я прочитал несколько сообщений stackoverflow, но не мог понять предложенные решения или объяснения ...

Answer 1

Выбор изображения просто отобразит его в браузере, но не загрузит его. Это происходит только после Форма отправлена. И в соответствии с вашим кодом после того, как пользователь нажал кнопку «Удалить изображение», <input type="file" /> останется без изменений, поэтому отправка формы по-прежнему будет загружать изображение. Вы должны фактически очистить поле, как описано здесь: Clearing <input type='file' /> using jQuery

Что касается технически несвязанной второго выпуска:

Я не могу показаться, чтобы выяснить, как на самом деле удалить изображение, как только его загрузки.

Чтобы удалить изображение после он загружен, предположительно, в режиме «редактирования событий», вы должны отправить по форме данных, указывающих, что изображение должно быть удалено, а затем удалить его на сервере ,

Answer 2

Согласно ответу Криса G, это то, что я сделал, и это сработало:

fileRemove.addEventListener("click", function(e) { 
    e.preventDefault(); // prevent submit 
    if(!$('#preview').hasClass('hidden')) { // If there is an image uploaded 
     $('#preview').empty(); 
     $('#dropbox').removeClass('hidden'); 
     $('#preview').addClass('hidden'); 
     $('#fileSelect').text('Upload Image'); 
     $('#image').wrap('<form>').closest('form').get(0).reset(); 
     $('#image').unwrap(); 
    } 
    removeError($('#imageError'), $('#image')); 
});