Jump to content
kongondo

Module: Jquery File Upload

Recommended Posts

JqueryFileUpload
 
This module is a ProcessWire implementation of the awesome Blueimp jQuery File Upload plugin.  Server-side, the module provides a custom uploads' handler enabling you to perform various tasks with ease. The module is an interface of the feature-rich Ajax File Uploads widget provided by the jQuery File Upload plugin.
 
The module is completely customisable and can be used both in the front- and backend (e.g. in a third-party module). 
 
Please read the README  carefully and completely before using the module
 
Release Status: Stable
Module Download: http://modules.processwire.com/modules/jquery-file-upload/
Issues tracker Project page: GitHub
 
Security
The module has been written with security in mind and makes no assumptions about any client-side validation. Instead, the module provides robust server-side validation of uploaded files. Server-side, no Ajax requests are honoured unless specifically set via configurable options server-side. This means that client-side requests to upload, delete and list files are not executed unless allowed server-side. By default, files are uploaded to a non-web-accessible (system) folder and files previously uploaded on the server are not sent back for display unless that setting is enabled. However, developers are still strongly advised to implement any other feasible measures to guard against malicious uploads, especially if allowing frontend uploading. For instance, developers can use native ProcessWire checks to limit access to the widget (e.g. only allowing uploads by registered/logged-in users).
 
Demo
A short video demo can be found here (and below :-))(CSS is WIP!  :-)). In the backend, you can see it in action within the (upcoming) module Media Manager
 
Features

  •  Fast Ajax uploads.
  •  Client and server-side validation.
  •  Client-side image resizing (highly configurable options).
  •  Beautiful touch-responsive image gallery preview.
  •  Audio and video previews pre-upload.
  • Chunked and resumable file uploads (currently client-side only; server-side handling planned).
  •  Drag and drop support.
  •  Copy and paste support (Google Chrome only).
  •  Progress bars.
  •  Cross-domain uploads.
  •  Single or multiple uploads.
  •  Delete uploaded files.

Documentation
On GitHub. Have a look at the long list of available options.
 
License
Released under the MIT license
 
@Credits: Sebastian Tschan
@Thanks: Pete and BernhardB for the idea.
 
Please test and provide feedback. Thanks!
 

  • Like 30

Share this post


Link to post
Share on other sites

Man - you aren't just on fire at the moment, you are ablaze :)

Nice work - I have used Blueimp on some other projects pre-PW and loved it, so thank you!

  • Like 1

Share this post


Link to post
Share on other sites

Your timing is impeccable - just what I need today! :)

Share this post


Link to post
Share on other sites

Man - you aren't just on fire at the moment, you are ablaze :)

Nice work - I have used Blueimp on some other projects pre-PW and loved it, so thank you!

3 AM blues!

  • Like 1

Share this post


Link to post
Share on other sites

I finally made it to work on frontend - didn't notice 'disableUploads' => true in the example ... should read more carefully

Share this post


Link to post
Share on other sites

Testing again on IIS with PW3. After upload I don't have access to uploaded files. I get HTTP 500.50 error along with 0x80070005 and that is (from my experience) permission issue. I'm assuming (didn't look at your sources) that files are uploaded to temp directory (PHP's upload_tmp_dir?) and then moved/renamed to the final destination at /site/assets/files/jqfu/files. In the process of moving the files, permissions of the files are inherited from the temp directory and those are not sufficient for the web server. Would you consider using $config->$uploadTmpDir instead of PHP's upload_tmp_dir?

Edit: I see you are using WireUpload class so I'll have to take a closer look into WireUpload.php...

Edited by matjazp

Share this post


Link to post
Share on other sites

PHP stores the uploaded file in the folder determined by upload_tmp_dir directive in php.ini. By default this is C:\Windows\Temp directory. After the uploaded file is stored to the upload_tmp_dir, ProcessWire will then move/rename the file to the final destination directory and that doesn’t inherit destination directory’s permissions. There are multiple options on how to make it work:
 
a.) Change the permissions on the windows temp folder giving IUSR and IIS_IUSRS  write/modify
b.) Change the path of the upload_tmp_dir in the php.ini file to a folder with appropriate permissions
c.) Change the way WireUpload works so that it copy the file, not rename/move it.
 
I didn't have upload problems in admin, because I used $config->$uploadTmpDir pointing to the /site/assets/uploads folder (created by me). This folder is used in WireUpload.php with ajax uploading (using $_SERVER['HTTP_X_FILENAME']). Since /site/assets/uploads folder inherits /site/assets folder permissions, moving/renaming the file is not the problem. When uploading using PHP's $_FILES global variable, $config->$uploadTmpDir is not used and files are uploaded to the folder set up by upload_tmp_dir directive.

As copying in slower than renaming, I'm not sure if this is the right solution (file WireUpload.php in function saveUpload):

$success = move_uploaded_file($tmp_name, $destination);

to:

$success = is_uploaded_file($tmp_name);
if($success) $success = @copy($tmp_name, $destination);
if(is_file($tmp_name)) @unlink($tmp_name);

Share this post


Link to post
Share on other sites

Good forensics. If it's a WireUpload.php issue then you can put in a request with @Ryan to hear his thoughts? Meanwhile, you can always use a custom uploads handler in conjunction with the other methods that come with the module, e.g. getResponse() which calls the crucial validation methods.

Share this post


Link to post
Share on other sites

I've written the issue on GitHub to hear Ryan's thoughts. I'm not good enough in PHP or PW internals and don't know when ajax upload is used. In "ajax mode" uploaded file is read from php://input and then created at the $config->$uploadTmpDir (if set) folder. In "nonajax mode" $config->$uploadTmpDir is not used - files are uploaded to the folder set up by upload_tmp_dir directive in php.ini It would be ideal if "nonajax upload" would store files in $config->$uploadTmpDir to... Is this possible? Sorry for dumb questions...

  • Like 1

Share this post


Link to post
Share on other sites

Do you have the demo without/or different music? The German GEMA and SME had YouTube blocking the video for Germany.  :'(

  • Like 1

Share this post


Link to post
Share on other sites

For a minute there I thought you were kidding. Never heard of this German GEMA & SME thing. I have just quickly read up about it. Well, I could try upload the video to Vimeo (would that work?) or you could do me a favour and watch the YT one behind a proxy :) ...that's not illegal, or is it?

Edit: There's also the 'original' demo at Blueimp

  • Like 1

Share this post


Link to post
Share on other sites

For a minute there I thought you were kidding. Never heard of this German GEMA & SME thing. I have just quickly read up about it. Well, I could try upload the video to Vimeo (would that work?) or you could do me a favour and watch the YT one behind a proxy :) ...that's not illegal, or is it?

I assume this will not work with a simple proxy as it is not that easy to trick google / youtube.

Share this post


Link to post
Share on other sites

I assume this will not work with a simple proxy as it is not that easy to trick google / youtube.

:ph34r:

...I have started the 'slow' upload to vimeo... :'(.... :lol:

  • Like 1

Share this post


Link to post
Share on other sites

Here's the vimeo version. Cannot get 1080p quality unless you are on the paid plans, but its viewable. I don't think am uploading to vimeo again...this was the first and last time. It takes forever and they restrict the quality, tsk.  :-)

  • Like 1

Share this post


Link to post
Share on other sites

It is an awesome video, so, also with music. Have had a nice looking. Thanks man!

Will also try the module in the next time.

  • Like 1

Share this post


Link to post
Share on other sites

Will also try the module in the next time.

Thanks. Will appreciate your professional opinion especially regarding the client-side-image resizing

  • Like 1

Share this post


Link to post
Share on other sites

Firstly - Kongondo - thanks for another great module.

I have been working on this all day and I have the form working well on the frontend, I can upload images and other files and I can see the upload progress etc on screen which is great and exactly what I've been looking for.

Where I've hit a brick wall for the last 3-4 hours though is I can't work out how to attach this to a field on one of my templates.  I have a template where I want to have a field which will allow users to upload images or files via the frontend. I have some other fields in the template too (normal text fields for description etc) and I have had those working for a long time - what I can't work out is how do I take the files uploaded via this jQuery module and add them to the files field in my template???

Any help gratefully received..

Share this post


Link to post
Share on other sites

Hi @Hantsweb,

Glad you like the module.

Technically, you can't 'attach' the module to a field in one of your templates :-). But I think I get what you are saying. You want uploaded files to be added to a field on some page(s). Before I dive into an answer, I hope in your upload implementation you've remembered to...'never to trust your users',...especially those who are allowed to add things to pages and whether what they've uploaded is immediately viewable on the frontend :-). Yes, the module does very thorough validation and will only upload what you've allowed to be uploaded but its always good to double check.

Below are links to some code I've previously posted that will be of help. What is your workflow? Are user uploads immediately added to a page? Are there unique pages for each user? Are compressed files (zip) in play? Whatever the answer to these questions, the basics are the same:

  1. Upload files to your server to a specified temporary folder(s). During the process validate the files: JqueryFileUpload
  2. Iterate over the folder with the uploads: I always use PHP SPL class for this, e.g. RecursiveDirectoryIterator
  3. In each iteration, add valid files to specified pages (if those pages are not being created by the uploads): Use ProcessWire for this
  4. Delete uploads in the temporary folder

Example code:

https://processwire.com/talk/topic/10815-mass-create-pages-or-mass-upload-images-and-thus-create-pages/?p=101791

https://processwire.com/talk/topic/8416-importing-many-pictures-in-a-page/

If you are adding to files to pages directly after they've been uploaded, you will want to listen to Ajax requests sent by JqueryFileUpload like so:

if ($this->config->ajax) {
  // you code here for iteration, creating and/or adding files to pages

}

Let us know if you hit another brick wall :-)

  • Like 1

Share this post


Link to post
Share on other sites

hi kongondo,

if i get you right, this module is intended to be used on frontend, isn't it? in the demo, though, it is used in backend with your media manager. would it be hard to get some kind of replacement of a standard image field directly in the backend? :)

Share this post


Link to post
Share on other sites

hi kongondo,

if i get you right, this module is intended to be used on frontend, isn't it? in the demo, though, it is used in backend with your media manager. would it be hard to get some kind of replacement of a standard image field directly in the backend? :)

:huh:  :huh:   :o  :o  :undecided:   :undecided:  

The module is completely customisable and can be used both in the front- and backend (e.g. in a third-party module).

In the video 0.00 - 4.25 Frontend (check the URL); 4.25 to end Backend (MediaManager)

:-)

As for your question about image replacement: I think it would be easiest to either extend FieldtypeFile or modify FieldtypeImage as a new module (and/or their related Inputfields - am not sure). What exactly are you after? I ask because I know there are some cool changes coming to the 'standard image field' and those might just meet your needs.

Edited by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.56
      Composer: rockett/jumplinks
      Jumplinks is an enhanced version of the original ProcessRedirects by Antti Peisa.
      The Process module manages your permanent and temporary redirects (we'll call these "jumplinks" from now on, unless in reference to redirects from another module), useful for when you're migrating over to ProcessWire from another system/platform. Each jumplink supports wildcards, shortening the time needed to create them.
      Unlike similar modules for other platforms, wildcards in Jumplinks are much easier to work with, as Regular Expressions are not fully exposed. Instead, parameters wrapped in curly braces are used - these are described in the documentation.
      Under Development: 2.0, to be powered by FastRoute
      As of version 1.5.0, Jumplinks requires at least ProcessWire 2.6.1 to run.
      View on GitLab
      Download via the Modules Directory
      Read the docs
      Features
      The most prominent features include:
      Basic jumplinks (from one fixed route to another) Parameter-based wildcards with "Smart" equivalents Mapping Collections (for converting ID-based routes to their named-equivalents without the need to create multiple jumplinks) Destination Selectors (for finding and redirecting to pages containing legacy location information) Timed Activation (activate and/or deactivate jumplinks at specific times) 404-Monitor (for creating jumplinks based on 404 hits) Additionally, the following features may come in handy:
      Stale jumplink management Legacy domain support for slow migrations An importer (from CSV or ProcessRedirects) Feedback & Feature Requests
      I’d love to know what you think of this module. Please provide some feedback on the module as a whole, or even regarding smaller things that make it whole. Also, please feel free to submit feature requests and their use-cases.
      Note: Features requested so far have been added to the to-do list, and will be added to 2.0, and not the current dev/master branches.
      Open Source

      Jumplinks is an open-source project, and is free to use. In fact, Jumplinks will always be open-source, and will always remain free to use. Forever. If you would like to support the development of Jumplinks, please consider making a small donation via PayPal.
      Enjoy! :)
    • By BitPoet
      As threatened in Ryan's announcement for 3.0.139, I built a little module for sliding toggles as a replacement for checkboxes. Styling of the input is CSS3 only (with all the usual caveats about older browsers), no JS necessary, and may still be a bit "rough around the edges", so to speak, since I didn't have much time for testing on different devices or brushing things up enough so I'd feel comfortable pushing it to the module directory. But here's the link to the GitHub repo for now:
      InputfieldSlideToggle
      Fieldtype and Inputfield that implements smartphone-style toggles as replacement for checkbox inputs. The visualization is CSS-only, no additional JS necessary.
      Status
      Still very alpha, use with caution!
      Features / Field Settings
      Size
      You can render the toggles in four different sizes: small, medium, large and extra large.
      Off Color
      Currently, "unchecked" toggles can be displayed either in grey (default) or red.
      On Color
      "Checked" toggles can be rendered in one of these colors: blue (default), black, green, grey, orange or red.
      Screenshots

      Some examples with checkbox label


      View all Size and Color Combinations
      Small toggles Medium toggles Big toggles Extra big toggles  









    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

       
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

       
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

       
      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
       
      Kind Regards
      Orkun
    • By teppo
      This module tracks changes, additions, removals etc. of public (as in "not under admin") pages of your site. Like it's name says, it doesn't attempt to be a version control system or anything like that - just a log of what's happened.
      At the moment it's still a work in progress and will most likely be a victim of many ruthless this-won't-work-let's-try-that-instead cycles, but I believe I've nailed basic functionality well enough to post it here.. so, once again, I'll be happy to hear any comments you folks can provide
      https://modules.processwire.com/modules/process-changelog/
      https://github.com/teppokoivula/ProcessChangelog
      How does it work?
      Exactly like it's (sort of) predecessor, Process Changelog actually consists of two modules: Process Changelog and Process Changelog Hooks. Hooks module exists only to serve main module by hooking into various functions within Pages class, collecting data of performed operations, refining it and keeping up a log of events in it's own custom database table (process_changelog.) Visible part is managed by Process Changelog, which provides users a (relatively) pretty view of the contents of said log table.
      How do you use it?
      When installed this module adds new page called Changelog under Admin > Setup which provides you with a table view of collected data and basic filtering tools See attached screenshots to get a general idea about what that page should look like after a while.
      For detailed installation instructions etc. see README.md.
       


    • By Gadgetto
      Status update links (inside this thread) for SnipWire development will be always posted here:
      2019-08-08
      2019-06-15
      2019-06-02
      2019-05-25
      If you are interested, you can test the current state of development:
      https://github.com/gadgetto/SnipWire
      Please note that the software is not yet intended for use in a production system (alpha version).
      If you like, you can also submit feature requests and suggestions for improvement. I also accept pull requests.
      ---- INITIAL POST FROM 2019-05-25 ----
      I wanted to let you know that I am currently working on a new ProcessWire module that fully integrates the Snipcart Shopping Cart System into ProcessWire. (this is a customer project, so I had to postpone the development of my other module GroupMailer).
      The new module SnipWire offers full integration of the Snipcart Shopping Cart System into ProcessWire.
      Here are some highlights:
      simple setup with (optional) pre-installed templates, product fields, sample products (quasi a complete shop system to get started immediately) store dashboard with all data from the snipcart system (no change to the snipcart dashboard itself required) Integrated REST API for controlling and querying snipcart data webhooks to trigger events from Snipcart (new order, new customer, etc.) multi currency support self-defined/configurable tax rates etc. Development is already well advanced and I plan to release the module in the next 2-3 months.
      I'm not sure yet if this will be a "Pro" module or if it will be made available for free.
      I would be grateful for suggestions and hints!
      (please have a look at the screenshots to get an idea what I'm talking about)
       




×
×
  • Create New...