get file name and path from dropzone

Question

User-1556678718 posted

Hi,

I have a dropzone where I'm supposed to drop an image. The Image should be uploaded only if the user presses some other Submit button. I  have js:

var myDropzoneMeta = new Dropzone("#metaImage",
        {
            url: "/file/post",
            autoProcessQueue: false,
            autoDiscover: false,
            maxFiles: 1,
            addRemoveLinks: true,
            init: function () {
                this.on("maxfilesexceeded", function (file) {
                    this.removeAllFiles();
                    this.addFile(file);
                });
                
                this.on("thumbnail", function (file) {
                    
                    //here is the problem  I need to get the file name and file path and put it in something
                });
               
            }
        });
    $("#metaImage").addClass('dropzone');

Then I have in my view 

<label for="metaImage" class="col-form-label">Meta Image</label>
            <div id="metaImage">
                <div class="dz-message" data-dz-message><span>Drop Image Here</span></div>
                 <input type="hidden" name="MetaFile" id="MetaFile" value="default"/>
            </div>

and the script to handle the post

$.post("/umbraco/DealManager/Deal/SaveDeal",
        {
            'Id': @deal.Id,
            
             'MetaImage': $('#MetaFile').val()//here I'm supposed to send the image file name and path

         })

Problem is how do I get the file name and file path from the dropzone?

Please help

Answer 1

User475983607 posted

Modern browser do not expose the file path on the client.  However, according to the DropZone docs, you can get the file name by...

this.on("thumbnail", function (file) {
	
	//here is the problem  I need to get the file name and file path and put it in something
	file.name;
});

Answer 2

User-1556678718 posted

hi Mgebhard,

Thanks for the file name. I need the file path in order to upload it. The request is to upload a file only if the whole form is saved

Answer 3

User665608656 posted

Hi RioDD,

Thanks for the file name. I need the file path in order to upload it. The request is to upload a file only if the whole form is saved

If you want to get file path in dropzone, you can use code like this:

dropzone.on("sending", function(file, xhr, data) {

    // if file is actually a folder
    if(file.fullPath){
        data.append("fullPath", file.fullPath);
    }
});

You can also refer to this link : How to access file location (path) when image file is drag and drop into the box

Best Regards,

YongQing.

Answer 4

User-1556678718 posted

Yes it is good for the file name but not for file path. Since it is not possible to get the file path, I'm sending base64 of the image and the image name so I'm putting it on temporary location first and then uploading it where it  is supposed to be uploaded (that's how Umbraco requires). Here is the full solution: in the js I have:

 var myDropzoneMeta = new Dropzone("#metaImage",
        {
            url: "/file/post",
            autoProcessQueue: false,
            autoDiscover: false,
            maxFiles: 1,
            addRemoveLinks: true,

            init: function () {
                
               
                this.on("thumbnail", function (file, dataUrl) {
                     $('.dz-progress').hide();
                    document.getElementById('MFileName').value = file.name;
                    document.getElementById('MFile').value = dataUrl;
                });

                this.on("removedfile", function (file) {
                    document.getElementById('MFileName').value = 'Removed';
                    document.getElementById('MFile').value = 'Removed';
                });
               
            }
        });

Then in the view:

 <div class="form-group col-12">
            <label for="metaImage" class="col-form-label">Meta Image</label>
            <div id="metaImage">
                <div class="dz-message" data-dz-message><span>Drop Image Here</span></div>
                <input type="hidden" name="MFile" id="MFile" value="Default" />
                <input type="hidden" name="MFileName" id="MFileName" value="Default" />
            </div>
        </div>

and on post 

$.post("/umbraco/url/Save123",
        {
            'Id': @Id,
            'MetaImage': $('#MFile').val(),
            'MetaImageName': $('#MFileName').val(),
            
            })

        });

So I receive base64 of the image 

Thanks