Question:
I want to know how you can track using JavaScript that a file is allowed from the desktop to the browser window, as it is implemented on this site, https://imgur.com/ , then when a picture is transferred from any folder, a window immediately opens, they say, drag it file in the window. I would like to ask how you can implement the same logic?
Answer:
// форма в которой храним данные let formData = new FormData(); // Реагируем когда что-то перетаскивают dropzone.addEventListener('dragenter', function(){ dropzone.className="hover"; }); // Перестаём реигировать когда перетаскивание закончилось ['drop', 'dragleave'].forEach(eventName => dropzone.addEventListener(eventName, function(){ dropzone.className=""; })); // начинаем обрабатывать когда что-то сбросили нам ['drop', 'dragover'].forEach(eventName => dropzone.addEventListener(eventName, function(e){ // отменяем стандартные действия e.preventDefault() e.stopPropagation() // тут у нас лежат перетащенные файлы let files = e.dataTransfer.files; // но это не мессив, поэтому делаем массивом files = [...files]; files.forEach(file => { // переадаём файл форме formData.append('file', file); // начинаем делать предпросмотр // именно тут, просто создаём html-элементы и кидаем их настраницу let preview = document.createElement('li'); file_list.appendChild(preview); // в идеале нужно проверить является ли файл картинкой makePreview(file).then(image => { let img = document.createElement('img'); img.src = image; preview.appendChild(img); }); // показываем кнопку "Отправить" submitBtn.className=""; }); }, false)); // вот тут, через FileReader читаем изображание function makePreview(file){ let fr = new FileReader(); return new Promise(resolve => { fr.readAsDataURL(file); // и когда оно готово, отдаём ответ fr.onloadend = () => resolve(fr.result) }); } // отправка всего на сервер submitBtn.onclick = function() { let url = null; // URL куда отправляем файлы fetch(url, { method: 'POST', body: formData }) // всё заргузилось .then(resp => console.log(resp)) // какие-то проблемы .catch(err => console.error(err)) }
#dropzone { width: 100%; height: 100px; border: 3px solid blue } #dropzone:before{ content: "Перетащи сюда файл"; } #dropzone.hover{ border-color: green; } #dropzone.hover:before{ content: "Отпускай, ловлю!"; } li img{ max-width: 100px; max-height: 100px; } .hidden{ display:none; }
<div id="dropzone" class=""></div> <ul id="file_list"></ul> <button id="submitBtn" class="hidden">Отправить</button>