locked
get file name and path from dropzone RRS feed

  • 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

    Thursday, September 5, 2019 7:47 AM

Answers

  • 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 6, 2019 6:57 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 10, 2019 12:22 PM

All replies

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

    Thursday, September 5, 2019 2:10 PM
  • 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

    Friday, September 6, 2019 5:38 AM
  • 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 6, 2019 6:57 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 10, 2019 12:22 PM