Module: Jquery File Upload

[huhabab]

Thank you, the error was on my part, changed the options before rendering the module. (...)

[kongondo]

50 minutes ago, huhabab said:

Thank you, the error was on my part, changed the options before rendering the module. (...)

Glad you sorted it out.

[kongondo]

Security Report: FYI

TL;DR: Our module does not use the vulnerable PHP files. We are OK; nothing to see here ?.

You might have come across reports that Blueimp jQuery File Upload on which the module JqueryFileUpload is based had some vulnerabilities that had gone undetected for 8 years! The vulnerabilities, that have since been fixed, had to do with the  server-side application examples that ship with Blueimp jQuery File Upload, specifically the two PHP files Upload.php and UploadHandler.php. Our ProcessWire JqueryFileUpload module is not in any way affected by the vulnerability. Here's why:

1. We don't use Upload.php and UploadHandler.php nor any server-side samples that might ship with Blueimp jQuery File Upload. We use ProcessWire's WireUpload Class instead.
2. We don't ship our module with these files.
3. We use Blueimp jQuery File Upload purely for its client-side upload capabilities (only the JavaScript).
4. Blueimp jQuery File Upload aside, we operate a very tight ship with our module. These include:
   1. Not everyone can upload files. That decision is left to the developer.
   2. All files are validated for both MIME types and file extensions.
   3. Only extensions specified by  admin are allowed to go through to validation.
   4. All uploads are stored in a temporary folder pending validation. The location of the temporary folder is configurable. One can set either a web-accessible folder (e.g. in cases where one wants to show thumbnails of uploaded images) or a hidden one.
   5. All actions sent from client-side are validated against settings stored server-side. For instance, uploading, listing and deleting files. So, changing a JSON setting sent to the module client-side has no effect server-side.
   6. We use CSRF.
   7. Etc...

Here are the relevant links to the above mentioned (but now fixed) exploits.

• https://blogs.akamai.com/sitr/2018/10/having-the-security-rug-pulled-out-from-under-you.html
• https://www.exploit-db.com/exploits/45584
• https://github.com/blueimp/jQuery-File-Upload/blob/master/VULNERABILITIES.md
• https://github.com/blueimp/jQuery-File-Upload/blob/master/SECURITY.md

In conclusion, this is just for your information, in case you were wondering or came across it. We are not affected and we didn't have to patch anything. Having said that, as per our OP, we urge all developers who use this module to exercise best practices to secure their applications.

Edited November 27, 2018 by kongondo
typos

[ottogal]

Thank you @kongondo for this information.

That  shows the exemplary security awareness of @ryan in all his work! One of the reasons that makes us glad using PW...

[szabesz]

On 11/28/2018 at 10:57 AM, ottogal said:

That  shows the exemplary security awareness of...

... Kongondo too ? 

[kongondo]

Update: Jquery File Upload Version 0.0.7.

 

As of today and this version onward, ONLY ProcessWire 3.x is supported.

 

Changelog

1. Added option to unzip uploaded ZIP archives (works only in PW backend {hence custom modules}).
2. Refreshed upload widget look and style.
3. Added support for so-called 'Upload Anywhere' (no documentation currently, sorry. Basically this means you can use a whole page a files' dropzone).

For those who care, this means Media Manager's release is imminent ?

 

Screenshots

 

 

Thanks!

Edited March 7, 2019 by kongondo
note about PW 3 support only

[palacios000]

Thanks for this great module!

I had a problem with my live server, it didn't allowed pdf to be uploaded, and the script fired the message "filetype not allowed". If anyone encounters this problem, the solution is to go on the server settings and tick the "fileinfo" extention in the PHP settings.

[palacios000]

Hello again,

Has anyone tried to add a file description to the file? I want to mantain the original filename with spaces, capital and special characters, if so I could add them to the file->description and display on the template the description instead of the filename. Is this something at all possible?

[kongondo]

On 4/19/2019 at 10:25 AM, palacios000 said:

Has anyone tried to add a file description to the file? I want to mantain the original filename with spaces, capital and special characters, if so I could add them to the file->description and display on the template the description instead of the filename. Is this something at all possible?

I don't quite understand. Do you mean you want to save the non-sanitised file name as a description rather than adding a description to the file later yourself?

[palacios000]

Hi! I'd like to keep the original file name. After upload the new sanitised name is not as human-friendly as the original file saved by client on his PC, this is why I was thinking to keep the original name somehow and save it on the file description. In my very modest opinion, this is somthing quite complicated to do, but maybe there is an easy solution.

 

[kongondo]

2 hours ago, palacios000 said:

Hi! I'd like to keep the original file name. After upload the new sanitised name is not as human-friendly as the original file saved by client on his PC, this is why I was thinking to keep the original name somehow and save it on the file description. In my very modest opinion, this is somthing quite complicated to do, but maybe there is an easy solution.

 

Maybe if you could explain your use case a bit more. What do you do with the uploaded file? If you are adding it to a ProcessWire Page, ProcessWire will not allow you to have your 'human-friendly' file name ?. It will be sanitised. I am guessing that is why you wanted to save the original file name in the description?

Secondly, who is uploading the files? The general public? Registered users? Site editors? 

[palacios000]

Yes you guessed right: registered user uploads pdfs on a PW page, which is then rendered like a "folder" and all files are displayed as a list, where the user can browse them... I'm able to make the list neater with some "str_replace" but still it won't be the same as it should.

I thought of writing the original file names on a txt file in the same temporary folder where files are saved, or into the session, and with some logic then add the content of the text file on each file->description field, but at the moment it's too complicated for me! Or maybe this could be a feature for the next released version ?. Thanks again for this great module anyway!

[bramwolf]

Thank you sooo much for this!! Truly super helpful, I've been trying to implement that precise script for two days, since I didn't know you had already done it, and failed! ?

thanks! ?

I do however have a few questions O:) 

I've been playing around with the config options but can't quite get the script to do what I want,
 I currently have:

$options = array(
	'showUploaded' => true,
	'uploadsDeletable' => true,
	'showUploaded' => true,
	'setMaxFiles' => 9999,
	'setOverwrite' => false,
);

But after the upload the script doens't show the files I uploaded, Nor do I see links to the files opening in a Gallery.
Also I've not managed to upload more than 50 files at once, the rest of the upload seems to just get dropped.

What settings would I have to use to:
- See the images already in the folder
- See the images after uploading with link to open them in a gallery?
- Actually upload 9999 files?

Thanks in advance! ?

[ildarvasin]

Is it possible to receive notifications in the administrative version of the processwire when user upload a file?

[kongondo]

1 hour ago, ildarvasin said:

Is it possible to receive notifications in the administrative version of the processwire when user upload a file?

No, sorry. You'd have to code that yourself. 

What's your use case?

Welcome to the forums ? 

[ildarvasin]

where the file upload button is processed?

[kongondo]

4 hours ago, ildarvasin said:

where the file upload button is processed?

I don't understand the question, I am afraid. Please explain.

[ildarvasin]

I want to do 2 things:
- clear the list of selected files when closing the module window;
- add closing the window, after downloading all the files at once.

But your code is quite difficult to understand at my level and I don’t understand where exactly the button press of the forms is processed.

p.s. I apologize if I do not make myself clear, because I am Russian-speaking.

[kongondo]

22 hours ago, ildarvasin said:

I want to do 2 things:
- clear the list of selected files when closing the module window;
- add closing the window, after downloading all the files at once.

This module has no window and does not open any modal. It's still not clear to me how you are using it. I am thinking maybe you are trying to use the module in your own module? Or in the ProcessWire admin? If I could get a bit more information about this and/or a diagram/drawing (or even an animated GIF), that would help.

[ildarvasin]

indeed, you are correct that your module was crammed into a separate block. The previous questions have disappeared.

Can I define my own file formats? You need to download 'doc, docx'. The rest so as not to even offer to saving.
as with mp3, txt

Spoiler

the following options, as I understand it, need to be set.
 

Spoiler

'acceptFileTypes' => 'doc docx',
allowedImageMimeTypes' => array(application/doc),
'commonImageExts' => array('doc', 'docx'),

the following options, as I understand it, need to be set. But the save button still appears in such formats as: .xls, .jpg, .png, .zip, .iso, pdf.
if you save the files, then all the allowed formats appear in the folder, but I would like to get rid of the button for unauthorized formats

[DV-JF]

Just a short question:

Is it possible to use this with FormBuilder? 

Many greets! 

[bramwolf]

Hey Guys,

I've tried the module and it works well ? All the files are uploaded very quickly! So thanks you for that! ? However I can't seem to manage to get
the module to behave the way it does in your examples. I've used the frontend scripts from the examples, they are unedited and original.
At first the area where selected images would show after being selected is already visible,
when I open the page. After the images are uploaded I never get to see them. Also it doesn't show images that are already uploaded to the directory.
I check the user privileges of the folder being used and they all have 755 access, so that shouldn't be the problem? I also tried with a custom folder
/templates but with the same result.




Also when I set:

		'enableDropZone' => 1,// render a drop zone where files could be uploaded via 'dropping'

to "0" the dropzone just stays visible in a a slightly different way.



I feel like it's not fully working, How can I check / improve it's functoinality to make sure these features work like they are supposed to? ?
I would like it to look and work like this example does: Just a select button and showing uploaded files :)

https://blueimp.github.io/jQuery-File-Upload/

Thanks in advance!

Bram

[gebeer]

@kongondo Referring to your post in Media Manager thread, do you think that JqueryFileupload will receive further updates? Just asking so I can decide whether I should fork it and potentially make PRs. 

[kongondo]

12 hours ago, gebeer said:

Referring to your post in Media Manager thread, do you think that JqueryFileupload will receive further updates?

No, unless security related. With respect to MM, I am moving to use an in-house htmx-alpine-js-tailwind-css solution.

12 hours ago, gebeer said:

Just asking so I can decide whether I should fork it and potentially make PRs. 

Most welcome.  I'd certainly look at PRs. Thanks!