Moodle

single click file upload

Details

  • Difficulty:
    Easy
  • Affected Branches:
    MOODLE_19_STABLE, MOODLE_20_STABLE

Description

enable "single click upload" of a single file on several components inside the Moodle framework.

in general, i gave the upload FORM a name : "upload"
and added a javascript onchange event to the input file(type)
that calls the submit function of the current FORM.

changes are in the following components:
files (repository)
assignment (upload)
assignment (uploadsingle)

i have also made a special usability shortcut inside the Files page
in which i included the "single upload file to the current folder" function
at the end of the main Files page.
(no need to click the old "upload file" and navigate to a new page)

hope you like it and that it does not break anything

btw,
i was inspired by this tracker to try and patch moodle to have a single click file upload.

  1. one-click-upload.tar.gz
    06/May/09 5:53 AM
    2 kB
    Nadav Kavalerchik
  1. Image Insert.png
    9 kB
    31/Mar/11 5:10 PM
  2. moodle2filescreen.png
    30 kB
    16/Mar/10 10:20 PM
  3. Quick Insert Image.png
    20 kB
    31/Mar/11 5:14 PM

Activity

Hide
Martin Dougiamas added a comment -

Something like this in the 2.0 file upload would be sweet.

Show
Martin Dougiamas added a comment - Something like this in the 2.0 file upload would be sweet.
Hide
Nadav Kavalerchik added a comment -

Martin, i am working on a version 2 implementation. i will keep you posted here.
(btw, the whole File dialog is half functional in version 2. is that ok ?)

one more thingy about the current patch...
the forum's "submit" input button is not needed anymore in upload assignment.
so please remove or remark the lines:

(file moodle/mod/assignment/type/upload/assignment.class.php)
176
//echo '<input type="submit" name="save" value="'.get_string('uploadthisfile').'" />';

262
//$output .= '<input type="submit" name="save" value="'.get_string('uploadthisfile').'" />';

(file moodle/mod/assignment/type/uploadsingle/assignment.class.php)
91
//echo '<input type="submit" name="save" value="'.get_string('uploadthisfile').'" />';

Show
Nadav Kavalerchik added a comment - Martin, i am working on a version 2 implementation. i will keep you posted here. (btw, the whole File dialog is half functional in version 2. is that ok ?) one more thingy about the current patch... the forum's "submit" input button is not needed anymore in upload assignment. so please remove or remark the lines: (file moodle/mod/assignment/type/upload/assignment.class.php) 176 //echo '<input type="submit" name="save" value="'.get_string('uploadthisfile').'" />'; 262 //$output .= '<input type="submit" name="save" value="'.get_string('uploadthisfile').'" />'; (file moodle/mod/assignment/type/uploadsingle/assignment.class.php) 91 //echo '<input type="submit" name="save" value="'.get_string('uploadthisfile').'" />';
Hide
Matt Gibson added a comment -

just add xxx.style.display = 'none'; to your js where xxx is the element you've just added your onChange listener to.

Show
Matt Gibson added a comment - just add xxx.style.display = 'none'; to your js where xxx is the element you've just added your onChange listener to.
Hide
Nadav Kavalerchik added a comment -

Matt , i do not understand why ?

Show
Nadav Kavalerchik added a comment - Matt , i do not understand why ?
Hide
Nadav Kavalerchik added a comment -

Martin,

for moodle v2:
please apply the following changes inside file: files/index.php to have it single-click-upload enabled.

line 163, change it to:

echo '<form name="upload" enctype="multipart/form-data" method="post" action="index.php"><div>';

line 170, change it to:

echo '<input name="newfile" type="file" onchange="document.upload.submit();"/>';
    //echo '<input type="submit" value="'.get_string('uploadafile').'" />';
Show
Nadav Kavalerchik added a comment - Martin, for moodle v2: please apply the following changes inside file: files/index.php to have it single-click-upload enabled. line 163, change it to:
echo '<form name="upload" enctype="multipart/form-data" method="post" action="index.php"><div>';
line 170, change it to:
echo '<input name="newfile" type="file" onchange="document.upload.submit();"/>';
    //echo '<input type="submit" value="'.get_string('uploadafile').'" />';
Hide
Nadav Kavalerchik added a comment -

additional changes for Repository Upload component (Moodle v2)

file repository/repository.src.js lines 993-994

str += '<input type="file" id="'+id+'_file" name="repo_upload_file" onchange="repository_client.upload(\''+client_id+'\');"/>';
 //str += '<p class="fp-upload-btn"><a href="###" onclick="return repository_client.upload(\''+client_id+'\');">'+fp_lang.upload+'</a></p>';
Show
Nadav Kavalerchik added a comment - additional changes for Repository Upload component (Moodle v2) file repository/repository.src.js lines 993-994
str += '<input type="file" id="'+id+'_file" name="repo_upload_file" onchange="repository_client.upload(\''+client_id+'\');"/>';
 //str += '<p class="fp-upload-btn"><a href="###" onclick="return repository_client.upload(\''+client_id+'\');">'+fp_lang.upload+'</a></p>';
Hide
Colin Matheson added a comment -

I am not sure if this is the correct place. I was playing with the 2.0 test site and uploaded a file. I love the overall improvements however there are a couple of place that I think usability could be improved.
When you choose Upload a file from the file picker it shows you a screen in which you have to click browse. This is a wasted step. You should be automatically taken to your computer file browser inside the file picker window if you click on the Upload a file option (unless there are going to be multiple file upload boxes.

Also the system should remember your last choice in the file picker and default load that. Right now it loads nothing and you have an extra click to choose, Upload a file.

I have added the Browse button screenshot.

Show
Colin Matheson added a comment - I am not sure if this is the correct place. I was playing with the 2.0 test site and uploaded a file. I love the overall improvements however there are a couple of place that I think usability could be improved. When you choose Upload a file from the file picker it shows you a screen in which you have to click browse. This is a wasted step. You should be automatically taken to your computer file browser inside the file picker window if you click on the Upload a file option (unless there are going to be multiple file upload boxes. Also the system should remember your last choice in the file picker and default load that. Right now it loads nothing and you have an extra click to choose, Upload a file. I have added the Browse button screenshot.
Hide
Derek Chirnside added a comment -

This is similar to http://tracker.moodle.org/browse/MDL-19849
Is anything happening about this? I can't understand the dialogue above for obvious reasons. Trying to put this in terms of clicks, and three comments.

1. At present in 2.0 we have, from inside the editor, for adding an image, 9 clicks

Click the icon Add/edit image
Click Find or upload an image
Click Upload a file
Click browse > navigate
Click to highlight file/Click 'Open'*
[Maybe type in Save as field]
[Maybe change license]
Click Upload this file
Click Insert
Click OK
Done

This must be improvable!!!

2. This option has less clicks: (6)

Click the icon to insert/edit an image.
SEE A SCREEN WITH BUTTON "Browse to upload" and "Browse Repository"
Click "Browse to upload" which takes you straight to your HDD > navigate
Click to highlight/Click to Open*
Click Insert
Click OK
Done

I've done a hack job of a screen layout.

*=or double click to bypass clicking open.

3. Or even better still. a menu bar somewhere.
[___________________________]Browse for image
Then, two clicks:
1) Browse
2) Double click
Done

Show
Derek Chirnside added a comment - This is similar to http://tracker.moodle.org/browse/MDL-19849 Is anything happening about this? I can't understand the dialogue above for obvious reasons. Trying to put this in terms of clicks, and three comments. 1. At present in 2.0 we have, from inside the editor, for adding an image, 9 clicks Click the icon Add/edit image Click Find or upload an image Click Upload a file Click browse > navigate Click to highlight file/Click 'Open'* [Maybe type in Save as field] [Maybe change license] Click Upload this file Click Insert Click OK Done This must be improvable!!! 2. This option has less clicks: (6) Click the icon to insert/edit an image. SEE A SCREEN WITH BUTTON "Browse to upload" and "Browse Repository" Click "Browse to upload" which takes you straight to your HDD > navigate Click to highlight/Click to Open* Click Insert Click OK Done I've done a hack job of a screen layout. *=or double click to bypass clicking open. 3. Or even better still. a menu bar somewhere. [___________________________]Browse for image Then, two clicks: 1) Browse 2) Double click Done
Hide
Derek Chirnside added a comment -

This is a suggested extra button on the add/insert image form to reduce the number of clicks to insert an image.

Show
Derek Chirnside added a comment - This is a suggested extra button on the add/insert image form to reduce the number of clicks to insert an image.
Hide
Derek Chirnside added a comment -

Slightly wacky suggestion of a 2 step image adding option to editor

Show
Derek Chirnside added a comment - Slightly wacky suggestion of a 2 step image adding option to editor
Hide
Derek Chirnside added a comment -

I'm curious why there is so litttle activity around this issue.
I am working with a school transitioning to Moodle 2.0.
A teacher last week came with a bit of a course design, which actually had quite a bit of merit.
Clear goals. A few activities, a lot of resources. She wanted some branding (little images), some options for various teachers etc etc.
Typed course plan and all the files on a Flash drive. [This is a rare situation]

Yet this teacher is is consigned to a LOT of clicking to upload the files. insert the images etc etc. We know it can be better.

We have the new "FILES associated with ACTIVITIES AND RESOURCES" model. Streamlining this process must benefit users, will not break any paradigms, and in actual fact is not hard to do etc etc. Why so little interest in this?

-Derek

Show
Derek Chirnside added a comment - I'm curious why there is so litttle activity around this issue. I am working with a school transitioning to Moodle 2.0. A teacher last week came with a bit of a course design, which actually had quite a bit of merit. Clear goals. A few activities, a lot of resources. She wanted some branding (little images), some options for various teachers etc etc. Typed course plan and all the files on a Flash drive. [This is a rare situation] Yet this teacher is is consigned to a LOT of clicking to upload the files. insert the images etc etc. We know it can be better. We have the new "FILES associated with ACTIVITIES AND RESOURCES" model. Streamlining this process must benefit users, will not break any paradigms, and in actual fact is not hard to do etc etc. Why so little interest in this? -Derek
Hide
Sam Marshall added a comment -

Thanks to a forum discussion I saw this bug and decided to throw in my opinion. I have two basic comments:

1) Is 'upload' always the primary method at every institution? What about if places use an institutional repository, so they never ever want to use upload?

Perhaps there should be an admin option: 'Default shortcut repository', which defaults to file upload. Then an API for each repository to create its shortcut mini-controls (optional to implement this; you can only select repos that implement it; file upload would be the only core one that implements it)...

2) When I personally use Moodle I do often want to do upload so I like this feature. I would suggest an implementation like the following:

A For image upload, in top line of form

[Find an image...]       [ ... file field... ] [ Quick upload ]

note: I prefer having an 'upload' button than random autosubmitting disturboforms, even if it does add one click.

note: changed text of 'Find or upload an image' for obvious reason

Obviously putting in a file and uploading it would have the same effect as clicking browse repository, clicking upload if not already selected, clicking browse and uploading the file there. So it saves 1/2 clicks but perhaps more importantly it saves a lot of interface complexity, ie there is no big scary screen.

B For other uploads, in moodle form file picker

[ Add... ]       [ ... file field... ] [Quick upload]

Not sure this is quite the same as what was already proposed or not.

In both cases I guess these would have to be done in some marginally horrible way (iframe).

Show
Sam Marshall added a comment - Thanks to a forum discussion I saw this bug and decided to throw in my opinion. I have two basic comments: 1) Is 'upload' always the primary method at every institution? What about if places use an institutional repository, so they never ever want to use upload? Perhaps there should be an admin option: 'Default shortcut repository', which defaults to file upload. Then an API for each repository to create its shortcut mini-controls (optional to implement this; you can only select repos that implement it; file upload would be the only core one that implements it)... 2) When I personally use Moodle I do often want to do upload so I like this feature. I would suggest an implementation like the following: A For image upload, in top line of form
[Find an image...]       [ ... file field... ] [ Quick upload ]
note: I prefer having an 'upload' button than random autosubmitting disturboforms, even if it does add one click. note: changed text of 'Find or upload an image' for obvious reason Obviously putting in a file and uploading it would have the same effect as clicking browse repository, clicking upload if not already selected, clicking browse and uploading the file there. So it saves 1/2 clicks but perhaps more importantly it saves a lot of interface complexity, ie there is no big scary screen. B For other uploads, in moodle form file picker
[ Add... ]       [ ... file field... ] [Quick upload]
Not sure this is quite the same as what was already proposed or not. In both cases I guess these would have to be done in some marginally horrible way (iframe).
Hide
Martin Dougiamas added a comment -

Derek, regarding your teacher, if there's a lot of files to upload then the best way is to zip them all first, upload to "private files" or an external repository, unzip, and only then start inserting them into content. Since the file picker defaults to the last selected repository it's fairly fast.

Regarding the insertion of shortcut buttons there are some considerations that need to be included in a design:

1) Confusing the interface with multiple ways to do the same thing is generally considered bad practice ... it confuses new users and increases the chance of code bugs.

2) Uploading files from a desktop is not the main way people will do things in the future ... files and media are more and more going to be on other servers in various repositories. I think Sam's comments are trying to address this, but as you can see it starts getting more complex not less ...

3) Technically, it's really hard and possibly impossible to go straight from a browse button in the editor to having an image in the draft file area and showing up in the HTML text. There are different systems at play here (HTML editor, file api, JS and non-JS versions etc)

Show
Martin Dougiamas added a comment - Derek, regarding your teacher, if there's a lot of files to upload then the best way is to zip them all first, upload to "private files" or an external repository, unzip, and only then start inserting them into content. Since the file picker defaults to the last selected repository it's fairly fast. Regarding the insertion of shortcut buttons there are some considerations that need to be included in a design: 1) Confusing the interface with multiple ways to do the same thing is generally considered bad practice ... it confuses new users and increases the chance of code bugs. 2) Uploading files from a desktop is not the main way people will do things in the future ... files and media are more and more going to be on other servers in various repositories. I think Sam's comments are trying to address this, but as you can see it starts getting more complex not less ... 3) Technically, it's really hard and possibly impossible to go straight from a browse button in the editor to having an image in the draft file area and showing up in the HTML text. There are different systems at play here (HTML editor, file api, JS and non-JS versions etc)
Hide
Don Hinkelman added a comment - - edited

1) Confusing the interface with multiple ways to do the same thing is generally considered bad practice ... it confuses new users and increases the chance of code bugs.

--Yes, usually bad practice and increased chance of bugs. However one-click multiple/single file upload with automated resource creation is hugely popular, especially among teachers new to Moodle (1.9 that is). This was introduced in 2008 with Project Course Format and got cloned or split into the Simple File Upload and Easy File Upload later on as developers picked up on that feature, i.e.: http://moodle.org/mod/data/view.php?d=13&rid=2880
If not in core 2.x, I am sure it will be a first-added plug-in at schools who want happy teachers. Zipping introduces an external program for new teachers to find, learn, and operate. That along with manual uploading, labeling, linking is just not necessary when it can be done in one step. We are talking of replacing a 15-20 step operation with a 2-step operation.

2) Uploading files from a desktop is not the main way people will do things in the future ... files and media are more and more going to be on other servers in various repositories.

--I would say as far as predicting the future of authoring, it may go completely the opposite direction, that is, more and more desktop-originated files. Why? Because student-generated content is growing and teacher-generated content is growing, at the expense of publisher/expert contributed content. With project-based learning, external content becomes less of a main file and more of a supporting link to the student-created file. Yes, the Moodle Hub will be a huge change that gets peer-to-peer authoring started. Personal, local and global repositories play a role, yet still the number one authoring tool currently for teachers are office suite tools. In the future, I see tablets as content-creating tools, not content-consuming tools that some experts say. (P.S. although we should move this part of the discussion to a community forum, this is a good example of how expectations of user behavior can determine development priorities and choices).

Show
Don Hinkelman added a comment - - edited 1) Confusing the interface with multiple ways to do the same thing is generally considered bad practice ... it confuses new users and increases the chance of code bugs. --Yes, usually bad practice and increased chance of bugs. However one-click multiple/single file upload with automated resource creation is hugely popular, especially among teachers new to Moodle (1.9 that is). This was introduced in 2008 with Project Course Format and got cloned or split into the Simple File Upload and Easy File Upload later on as developers picked up on that feature, i.e.: http://moodle.org/mod/data/view.php?d=13&rid=2880 If not in core 2.x, I am sure it will be a first-added plug-in at schools who want happy teachers. Zipping introduces an external program for new teachers to find, learn, and operate. That along with manual uploading, labeling, linking is just not necessary when it can be done in one step. We are talking of replacing a 15-20 step operation with a 2-step operation. 2) Uploading files from a desktop is not the main way people will do things in the future ... files and media are more and more going to be on other servers in various repositories. --I would say as far as predicting the future of authoring, it may go completely the opposite direction, that is, more and more desktop-originated files. Why? Because student-generated content is growing and teacher-generated content is growing, at the expense of publisher/expert contributed content. With project-based learning, external content becomes less of a main file and more of a supporting link to the student-created file. Yes, the Moodle Hub will be a huge change that gets peer-to-peer authoring started. Personal, local and global repositories play a role, yet still the number one authoring tool currently for teachers are office suite tools. In the future, I see tablets as content-creating tools, not content-consuming tools that some experts say. (P.S. although we should move this part of the discussion to a community forum, this is a good example of how expectations of user behavior can determine development priorities and choices).
Hide
Nadav Kavalerchik added a comment -

I agree with Don

Especially, With the feedback i get, regularly,
from 50+ K12 schools, 12+ Teacher Colleges and 5+ Universities.

Show
Nadav Kavalerchik added a comment - I agree with Don Especially, With the feedback i get, regularly, from 50+ K12 schools, 12+ Teacher Colleges and 5+ Universities.

Dates

  • Created:
    Updated: