We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • Description
    Display an upload button for uploading multiple files with progress counter. The upload queue could be filled and saved by Formit hooks.

    Features
    With this snippet an upload button for uploading multiple files with progress counter is generated. Works well in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

    All uploaded images and generated thumbnails are given random filenames to avoid hotlinking uploaded not published fullsize images. Automatic thumbnail generation for uploaded jpeg, png and gif files. Other uploaded files will get a generic icon.

    With two Formit hooks the upload queue could be pre filled from Formit field value and saved into Formit field value.

    This Extra is a Snippet-/jQuery-Wrapper for Andrew Valums great file upload script.

    Documentation on MODX Docs
    Bugtracker and hotfixes on GitHub
    • Excellent!
      I'm going to test this.
      Does it have usegroup's permission?
        Rico
        Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
        MODx is great, but knowing how to use it well makes it perfect!

        www.virtudraft.com

        Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

        Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

        Maintainter/contributor of Babel

        Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.
      • The upload connector itself is not secured on user permission (this could be provided by changing the connector). Random filenames (for uploads and thumbs) during upload avoid hotlinking of uploaded files that are not moved to target after form submission.

        The only problem that could occur is posssible floading the server with uploaded files. Uploaded files stay in cache for 4 hours per default. Automatic purging will executed after each upload. The cache could be cleaned manually by calling AjaxUpload::clearCache(xxx) with other values in xxx. [ed. note: Jako last edited this post 10 years, 5 months ago.]
        • Ok,
          I'll try to pull request on that matter, later on next week. smiley
            Rico
            Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
            MODx is great, but knowing how to use it well makes it perfect!

            www.virtudraft.com

            Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

            Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

            Maintainter/contributor of Babel

            Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.
            • 37005
            • 3 Posts
            I've included this in my template:
            [[!Formit?
            &preHooks=`Formit2AjaxUpload`
            &hooks=`AjaxUpload2Formit`
            &ajaxuploadFieldname=`image`
            &ajaxuploadTarget=`images/uploads/`
            &ajaxuploadUid=`image`
            ]]

            Plus
            [[!AjaxUpload?
            &uid=`image`
            &allowedExtensions=`jpg,jpeg,png,gif`
            &thumbX=`75`
            &thumbY=`75`
            ]]
            

            And the Formit form.

            The upload button appears and it starts to upload but then i get this alert: Could not save uploaded file. The upload was cancelled or a server error encountered.

            I've tried several small jpgs. The site's on a local MAMP server.

            What else do i have to do besides including these snippet calls and chmod the upload dir?
              • 41510
              • 1 Posts
              Hi kilg0retrout.
              As I could see, all files are uploading to sitename/assets/components/ajaxupload/cache/
              So you can look there to check uploading. Then,
              "ajaxuploadTarget — Target path for the (already) uploaded files (relative to $modx->getOption['assetsPath'])" http://rtfm.modx.com/extras/revo/ajaxupload
              Quote from: kilg0retrout at Nov 17, 2013, 05:41 AM

              &ajaxuploadTarget=`images/uploads/`

              It seems like in your case this path will be like sitename/assets/images/uploads/
              Check if this dir exists.
              To use sitename/images/uploads/ folder I used:
              &ajaxuploadTarget=`../images/uploads/`

              [ed. note: bugaboo last edited this post 10 years, 3 months ago.]
              • Quote from: kilg0retrout at Nov 17, 2013, 05:41 AM

                The upload button appears and it starts to upload but then i get this alert: Could not save uploaded file. The upload was cancelled or a server error encountered.

                This error occurs somewhere in fileuploader.class.php during checking the size of uploaded stream (after an ajax upload) or during moving the uploaded file to the target (after a regular upload). Those two possibilities depends on the browser abilities (short version: IE does a regular upload without progress counter, others could do an ajax upload with progress counter). What browser do you use?

                Don't know whats going wrong there in your installation. Maybe a tmpfile() generation problem. Maybe you could see something in the PHP error log of that installation.


                  • 45950
                  • 40 Posts
                  when I view the page nothing shows...
                  however when I view the source of the page it shows this
                  <div id="file-uploader-image">
                  <div class="file-uploader-items">

                  </div>
                  <div class="file-uploader-buttons">
                  <noscript>
                  <input type="file" name="image" />
                  </noscript>
                  </div>
                  </div>
                  any ideas?
                  [[update]]
                  i had to use the
                  &addJquery=`No`
                  &addJscript=`Yes`
                  &addCss=`Yes`
                  in the sniippet properties to make this work? why would I have to?

                  additionally, still don't understand how to get them out of the cache and into the ajaxuploadtarget
                  does anyone have an example of this? [ed. note: d1ckyh last edited this post 10 years, 2 months ago.]
                  • Any errors in the javascript console of your browser?
                      • 45950
                      • 40 Posts
                      Quote from: Jako at Jan 01, 2014, 06:53 PM
                      Any errors in the javascript console of your browser?
                      only js error I see now is SyntaxError: Using //@ to indicate source map URL pragmas is deprecated. Use //# instead which is coming from jquery.min.js