Pass PHP variable to dropzone.js

Question

I want admin to be able to set a max file size from within their dashboard (built in codeigniter)

They have the option to set a setting for 'max file size' as different hosting companies have different upload_max_filesize set in the php.ini files.

i want to pass that variable to dropzone.js

The variable i'm trying to pass is $max_filesize

my dropzone.js code :

Dropzone.options.mydropzone = {
    
    maxFiles: 1,
    maxFilesize: '$max_filesize', //where i want to pass the variable
    acceptedFiles: ".png, .jpg, .jpeg, .PNG, .JPG, .JPEG",
    addRemoveLinks: true,
    autoProcessQueue: false, 
    autoDiscover: false,                
    clickable: true, 
    previewsContainer: '#dropzonePreview',
    resizeMethod:'crop',
    resizeWidth:500,
    resizeHeight:500,
    resizeQuality: 1.0,
    

    accept: function(file, done) {
        console.log("uploaded");
        done();
    },
    error: function(file, msg){
        alert(msg);
    },
    
    init: function() {
        var myDropzone = this;

        this.on("addedfile", function(file) {
            $("#dropzoneimg").addClass("profile-pic-round")
        })
        //now we will submit the form when the button is clicked
        $("#sbmtbtn").on('click',function(e) {
           e.preventDefault();
           if (myDropzone.getQueuedFiles().length > 0) {                        
            myDropzone.processQueue();                  
            window.location.href = 'addStaff';
         } else {                       
            $("#mydropzone").submit();
         }
        });  
          
    } // init end
    
};

How is this possible?

EDIT :

Sorry i forgot to mention the dropzone.js is in an external file

Is this code generated by a PHP script? It should be when you want to pass on a variable. — Maarten Veerman, Jul 21 '20 at 21:04

score 0 · Answer 1 · answered Jul 21 '20 at 21:05

0

Try maxFilesize: '<?php echo $max_filesize; ?>', Note: You may need to change the file type to .php, depending on your web server. You may also need to add a mimetype header so the browser can interpret it as javascript (usually not a problem if you include it with a normal script tag, but some browsers complain in the console).

Another idea would be to render a javascript variable with PHP that is then read by this script. Ex:

<?php echo '<script>var MyAppOptions = { maxFileSize: '100 mb' };</script>'; ?>

and later:

Dropzone.options.mydropzone = {
...
  maxFilesize: MyAppOptions.maxFileSize,

but you would need to be sure that the PHP rendered script was running before the Dropzone init script.

answered Jul 21 '20 at 21:05

QuickDanger

1,032
11
18

sorry i forgot to mention the dropzone.js is in an external .js file – James C Jul 21 '20 at 21:10
yeah i tried something similar trying to set a var by echoing the variable in the php script then using it in the dropzone settings but it just breaks the dropzone. ive tried varying methods inc yours but none of them work. if its not a specific number in the maxFilesize: it breaks. the variable must not be passing through – James C Jul 21 '20 at 21:26
Also consider the order of operations. If your script that sets the value is running after the dropzone is configured, it would be undefined when trying to configure the dropzone. – QuickDanger Jul 23 '20 at 00:51

rexfordkelly · Answer 2 · 2020-07-21T21:25:44.507

Unless you can process your above js file as a template which you can inject an echoed variable as you described. You could, in a footer or header template define a js var which will be leveraged in your JS file.

maxFilesize: maxFilesize, as long as a the JS var maxFilesize is set prior to Dropzone.options.mydropzone = { is called

Alternatively you could setup a url endpoint which returns a json response with the options you would then inject into your Dropzone constructor.

Something along the lines as:


    $.getJSON('/siteDropZoneOptions.json', function(data) {
        Dropzone.options.mydropzone = Object.assign({
              // The rest of you current constructor object
        }, data ); // overrides presets with the response from server defined Options.
    });

Check out this post on how do fetch json if you don't want to use JQuery. How to make a JSON call to a url?

Pass PHP variable to dropzone.js

2 Answers2