Comments (5)
felixbuenemann
commented on August 16, 2024
This repository is for the gem packaging of the jquery file upload gem.
However, just instantiating the plugin won't trigger a file upload, that's why your current code is doing nothing.
You should look into the Programmatic file upload section in the jQuery-File-Upload Wiki.
from jquery-fileupload-rails.
stefanocdn
commented on August 16, 2024
Thank you for the link, I checked out the Programmatic file upload section.
But there is a main problem I can't solve : I need to upload one file from 2 different widgets (I need these 2 different widgets to upload different sizes.
I tried to keep the code below and add a programmatic upload in the callback.
fileInput.fileupload({
fileInput: fileInput,
url: form.data('url'),
type: 'POST',
autoUpload: true,
formData: form.data('form-data'),
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false,
disableImageResize: false,
imageMaxWidth: 800,
imageMaxHeight: 800,
imageCrop: true,
done: function(e, data) {
// Trigger a programmatic upload
fileInput.fileupload('send', {
fileInput: fileInput,
url: form.data('url-thumbnail'),
type: 'POST',
formData: form.data('form-data-thumbnail'),
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: true,
disableImageResize: false,
singleFileUploads: false,
imageMaxWidth: 100,
imageMaxHeight: 100,
imageCrop: true})
.success(function (result, textStatus, jqXHR) {
console.log("SUCCESS");
})
.error(function (jqXHR, textStatus, errorThrown) {
console.log("error");
})
.complete(function (result, textStatus, jqXHR) {
console.log("complete");
});
},
});
Which enters a loop of uploads. Not working.
Then I thought about creating 2 different widgets to upload programmatically following the pattern:
//Initialize
$('#file').fileupload({
url: 'thumbnailURL'
});
$('#form').fileupload({
url: 'largeURL'
});
//Trigger the submit
$('#file').fileupload({
fileInput: $('#file')
});
$('#form').fileupload({
fileInput: $('#file')
});
But the 2 widgets end up referring to the same file input and that doesn't work either.
I thought about an hacky solution, add a second hidden file input, create a second separate widget, and then populate the input field when the file is selected : but it is not possible to populate manually an input field with a file.
Unfortunately I can't think of another way to proceed..
Any suggestion or idea would be of great help!
from jquery-fileupload-rails.
stefanocdn
commented on August 16, 2024
I am trying another approach for the multiple versions upload.
The following code works fine.
$('#file_upload').find("input:file").each(function(i, elem) {
var fileInput = $(elem);
var form = $(fileInput.parents('form:first'));
fileInput.fileupload({
fileInput: fileInput,
url: form.data('url'),
type: 'POST',
autoUpload: true,
formData: form.data('form-data'),
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false,
disableImageResize: false, imageCrop: true,
processQueue: [
{
action: 'loadImage',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resizeImage',
maxWidth: 400,
maxHeight: 400
},
{action: 'saveImage'}
],
processstart: function (e) {
console.log('Processing started...');
},
process: function (e, data) {
console.log('Processing ' + data.files[data.index].name + '...');
},
processdone: function (e, data) {
console.log('Processing ' + data.files[data.index].name + ' done.');
}
}); //fileupload
I changed the processQueue to upload 2 versions in a row:
processQueue: [
{
action: 'loadImage',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resizeImage',
maxWidth: 400,
maxHeight: 400
},
{action: 'saveImage'},
{action: 'duplicateImage'},
{
action: 'resizeImage',
maxWidth: 200,
maxHeight: 200
},
{action: 'saveImage'},
]
Problem: the first saveImage does not upload the first image before duplicating. Instead there is only one POST request issued for both files, which returns the error => POST requires exactly one file upload per request.
Any idea how to fix this issue? Thx for your help.
from jquery-fileupload-rails.
felixbuenemann
commented on August 16, 2024
Shouldn't you be able to use fileupload('add', options) or fileupload('send', options) twice to do the upload? You could then set the different image sizes in the options hash. You might need to set replaceFileInput: false for this to work.
from jquery-fileupload-rails.
stefanocdn
commented on August 16, 2024
@felixbuenemann Thanks again for your reply.
fileupload('add', options) does not work for me because I trigger the upload already inside an add callback so then it loops.
Using fileupload('send', options) works fine for the upload, and I can trigger it twice which is perfect, but I can't get any resize working : the original is uploaded every time.
fileInput.fileupload('send',
{
fileInput: fileInput,
url: form.data('url'),
disableImageResize: false,
imageCrop: true,
imageMaxWidth: 100,
imageMaxHeight: 100,
formData: data_thumbnail,
replaceFileInput: false,
type: 'POST',
autoUpload: false,
paramName: 'file',
dataType: 'XML'
}
);
I could not fine SO threads mentioning resizing with 'send' and I could not find it in the wiki either, so if you have the solution to resize with 'send' that would be extremely helpful. Thanks again
from jquery-fileupload-rails.
Related Issues (20)
- sassc dependency break installation on old servers HOT 1
- fileupload() is not function HOT 4
- multipart to allow uploads past 5gb size
- How to get this gem working with Rails 6.
- Release gem v.0.4.4 HOT 3
- Release gem v0.4.5 HOT 1
- jquery fileupload with nested attributes HOT 4
- Can we update the assets for this? HOT 2
- Cant integrate S3 with javascript file upload using presigned post HOT 5
- Use controller or helper instead of model for upload HOT 5
- preview image/video not working HOT 1
- Release gem v0.4.6 HOT 1
- A couple of the asset files seem to be mutually exclusive
- Widget not working in Rails 5? HOT 1
- Can't direct upload to DreamObjects (S3 compatible OpenStack installation) HOT 3
- Select a file button not responding on production HOT 1
- replace sass with sassc
- Update to support Rails 5.2 HOT 2
- ActionView::Template::Error: Invalid CSS after "screen": expected media query list, was "\" HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-fileupload-rails.