드롭존에 기존 이미지 파일 추가

드롭존에 기존 이미지 파일 추가

사용 중Dropzonejs양식에 이미지 업로드 기능을 추가하려면 양식에 다양한 다른 필드가 있으므로 설정합니다.autoProcessQueue로.false그리고 아래와 같이 양식의 제출 버튼을 클릭하여 처리합니다.

Dropzone.options.portfolioForm = { 

    url: "/user/portfolio/save",
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 8,
    autoProcessQueue: false,
    autoDiscover: false,
    addRemoveLinks: true,
    maxFiles: 8,

    init: function() {

         var myDropzone = this;
         this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

             e.preventDefault();
             e.stopPropagation();
             myDropzone.processQueue();
         });
     }
 }

이것은 잘 작동하고 양식이 제출될 때 전송되는 모든 이미지를 처리할 수 있습니다.하지만 사용자가 양식을 다시 편집할 때 이미 업로드한 이미지를 볼 수 있기를 바랍니다.그래서 저는 Dropzone Wiki의 다음 게시물을 검토했습니다.https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

어느 것이 채워지는 것dropzone-preview기존 이미지가 있는 영역이지만 이번에는 양식 제출로 기존 이미지를 보내지 않습니다.이 이미지들은 에 추가되지 않았기 때문인 것 같습니다.queue하지만 그렇다면 사용자가 기존 이미지를 제거한 경우 서버 측에서 어떻게 업데이트할 수 있습니까?

또한, 어떤 접근법이 더 나은지, 이미 추가된 이미지를 추가합니다.queue다시 또는 제거된 파일의 정보만 보내시겠습니까?

이미지를 다시 추가하기 위해 시간을 좀 들였지만, 잠시 고민한 끝에 삭제된 이미지에 대한 정보를 서버로 다시 전송하게 되었습니다.

기존 이미지로 드롭존을 채울 때 이미지의 URL을 mockFile 개체에 첨부합니다.제거된 파일 이벤트에서 제거할 파일이 미리 채워진 이미지(이벤트에 전달된 파일에 URL 속성이 있는지 테스트하여 확인)인 경우 양식에 숨겨진 입력을 추가합니다.아래에 관련 코드가 포함되어 있습니다.

Dropzone.options.imageDropzone = {
    paramName: 'NewImages',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    init: function () {
        var myDropzone = this;

        //Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = { 
                    name: "myimage.jpg", 
                    size: 12345, 
                    type: 'image/jpeg', 
                    status: Dropzone.ADDED, 
                    url: thumbnailUrls[i] 
                };

                // Call the default addedfile event handler
                myDropzone.emit("addedfile", mockFile);

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.files.push(mockFile);
            }
        }

        this.on("removedfile", function (file) {
            // Only files that have been programmatically added should
            // have a url property.
            if (file.url && file.url.trim().length > 0) {
                $("<input type='hidden'>").attr({
                    id: 'DeletedImageUrls',
                    name: 'DeletedImageUrls'
                }).val(file.url).appendTo('#image-form');
            }
        });
    }
});

서버 코드(aspmvc 컨트롤러):

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        foreach (var url in viewModel.DeletedImageUrls)
        {
            // Code to remove the image
        }

        foreach (var image in viewModel.NewImages)
        {
            // Code to add the image
        }
    }
}

그게 도움이 되길 바랍니다.

Tepic의 답변을 연장하기 위해 미리보기에서 진행 표시줄을 제거하기 위해 전체 이벤트를 내보내야 한다는 것을 알았습니다.

var file = {
    name: value.name,
    size: value.size,
    status: Dropzone.ADDED,
    accepted: true
};
myDropzone.emit("addedfile", file);                                
myDropzone.emit("thumbnail", file, value.path);
myDropzone.emit("complete", file);
myDropzone.files.push(file);

그냥 쓰기myDropzone.addFile(file)

dropzone 소스 코드 https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978 에서.

여기 공식 FAQ가 있습니다.

드롭존에 내장된 디스플레이를 사용하여 이 문제를 해결했습니다.기존 파일" 메서드입니다.

init: 함수에 있습니다.

1. 모의 파일 만들기

   mockFile = {name: file.dll, size: file.size, dataURL:};

2. 디스플레이 호출기존 파일 함수

   이 디스플레이기존 파일(mockFile, , null, '익명')

'null' 대신 축소 이미지 로드 이벤트에 응답하기 위해 콜백을 할 수 있습니다.

'익명'은 교차 원점 속성에 대한 것입니다.

원래는 기존 파일을 프로그래밍 방식으로 업로드하기 위해 이 작업을 수행했습니다.

myDropzone.emit("addedfile", imageFile);                                
myDropzone.emit("thumbnail", imageFile, imageUrl);
myDropzone.files.push(file);

그러나 이 Dropzone Github 문제를 참조하여 직접 업로드하는 더 쉬운 방법을 찾았습니다.

myDropzone.uploadFiles([imageFile])

유감스럽게도 Dropzone Documentation에는 이 uploadFiles 메서드에 대한 참조가 없으므로 Dropzone 사용자 모두와 몇 가지 지식을 공유해야겠다고 생각했습니다.

이것이 누군가에게 도움이 되기를 바랍니다.

파일의 URL이 있으면 addFile로 파일을 추가할 수 있습니다.

fetch("url")
    .then(res => res.blob())
    .then((currentBlob) => {
        const generateFile = new File([currentBlob], "filename.jpg", {
            type: currentBlob.type,
        });
        myDropzone.addFile(generateFile);
    });

업로드 파일을 클릭하면 드롭존에서 파일을 삭제할 수 있습니다.removeAllFiles()를 사용하여 모든 파일을 지우거나 removeFile(fileName)을 사용하여 특정 파일을 삭제할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/24445724/add-existing-image-files-in-dropzone