get file name and path from dropzone

Question

_{Thursday, September 5, 2019 7:47 AM}

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

All replies (4)

_{Friday, September 6, 2019 6:57 AM ✅Answered}

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.

_{Tuesday, September 10, 2019 12:22 PM ✅Answered}

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

_{Thursday, September 5, 2019 2:10 PM}

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;
});

_{Friday, September 6, 2019 5:38 AM}

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