score:0
In the add: callback change your s3 signature for the 'key' from '/somefolder/${filename}' to '/somefolder/your-new-name'
s3_signatures = {
key: '/somefolder/${filename}',
…
}
$('.fileupload').fileupload({
url: url,
type: 'POST',
formData: s3_signatures, // adding signature for S3
add: function(e, data){
s3_signatures['key'] = '/somefolder/your-new-name';
data.formData = s3_signatures;
data.submit();
} …
score:2
I ran into a similar challenge after following the Heroku tutorial. I wanted to remove spaces from the filename and add a folder prefix based on the current project. In order to change the filename before uploading to S3, I added a submit callback where I modified the name on the client side.
fileInput.fileupload({
...
submit: function (e, data) {
// Get the original filename
var fileName = data.originalFiles[0].name
// Get the prefix from the form
var keyPrefix = form.data('key-start')
// Combine the prefix and the original filename with start/end whitespace removed
var fullFileName = keyPrefix + fileName.trim();
// Replace whitespaces with underscores
// At this step you could replace other special characters as well
var newFileName = fullFileName.replace(/\s+/g, '_');
// Update the form data with the new key value
$(form.data('form-data')).attr("key", newFileName);
// Set the form data
data.formData = form.data('form-data');
},
...
});
Since I changed the filename, I needed to ensure that S3 knows that as well. The tutorial suggested key
value in the controller set_s3_direct_post
method is:
key: "uploads/#{SecureRandom.uuid}/${filename}"
The key
method requires that the filename match what is provided when the post URL is created (which it wouldn't because I'm not using the dynamic ${filename}
value and I don't know the final filename when the direct post URL is created to specify it). I used the key_starts_with
method so that I could specify the project folder prefix (with spaces removed) and S3 would just evaluate that for a match:
key_starts_with: "#{(current_project.name).strip.split(' ').join('_')}/"
My final set_s3_direct_post
method was:
def set_s3_direct_post
@s3_direct_post = S3_BUCKET.presigned_post(key_starts_with: "#{(current_project.name).strip.split(' ').join('_')}/", success_action_status: '201', acl: 'public-read')
end
More details on key_starts_with
can be found in the AWS SDK for Ruby.
For reference, here is my form with the added key-start
data value:
<%= simple_form_for @asset, html: {class: 'directUpload new_asset', data: { 'form-data' => (@s3_direct_post.fields), 'key-start' => "#{current_project.name}/#{SecureRandom.hex(4)}_" , 'url' => @s3_direct_post.url, 'host' => URI.parse(@s3_direct_post.url).host } } , :url => project_assets_path(current_project) do |f| %>
<%= f.input :name %>
<%= f.input :file, as: :file %>
<%= f.button :submit, "Add File", class: "addFileButton" %>
<% end %>
In my case, I was only using this for single file uploads and only wanted to ensure spaces were removed from the filename (I was one of two users of this upload form, so special characters or other issues with the filename weren't a concern).
Related Query
- Using jQuery to View a File Before Upload
- compress images before uploading using jquery file upload
- jQuery blueimp file upload NuGet package MVC 4 file rename
- Can't upload file in Internet Explorer using JQuery Form plugin
- 400 (Bad Request) Error - Spring MVC File upload Using JQuery AJAX
- Simple jQuery AJAX file upload
- Validate file size before upload - IE8+
- Checking file size/type before upload using Paperclip and Rails
- jquery file upload plugin template engine?
- how to implement progress bar of file upload using jquery in asp.net?
- How to get folder name uploaded on file upload control + jquery
- jQuery file upload and save without server side
- Error in file upload using Jquery & Ajax
- Upload a file by posting a file in jquery ajax to an asmx
- maxNumberOfFiles not working properly in blueimp jQuery File Upload
- JQuery File Upload to NGINX/PHP server fails when over 1.5GB
- Filter image as per product type in file upload jquery plugin with asp.net
- Input file field empty after uploading with jquery file upload
- Resizing image at client-side using JQuery file upload to amazon S3
- jQuery ajaxForm trigger file upload on file drop over div
- Retrieve jqXHR in jquery file upload plugin's fileuploadsend event?
- jQuery blueimp File Upload won't delete over ssl
- How to display errors from server side with jQuery blueimp File Upload plugin
- Can I convert all files with jquery file upload to jpg?
- jQuery file Upload and getting $_Files
- Latest jquery equivalent for file upload without refreshing the page
- Upload files with Jquery File Upload in ASP.NET MVC 3
- jQuery File Upload show time remaining?
- Request.Files is empty when uploading with jQuery File Upload with Internet Explore 6/9
- Jquery file upload - get number of attachments uploaded
- How to validate image size, height, width and format before upload with jquery of PHP?
- JQuery ajax file upload to ASP.NET with all form data
- How to show upload image preview using jquery before form submit in a div
- Remove upload file from input jQuery
- jquery file Upload rails "Error Empty file upload result"
- Blueimp jQuery File Upload Button Triggering
- Blueimp jQuery File Upload Integrated with Database
- How to upload file with JQuery to MVC VNext webserver?
- JQuery File Upload plugin, Internet Explorer, and IFrame transport
- jQuery file upload how to get number of files queued and uploaded
- CodeIgniter, Jquery Ajax, Form Submission and File Upload
- Jquery File Upload plugin: Dynamically change upload path?
- File upload using jquery works in Firefox but not in Internet Explorer
- Calling system's file upload window with anchor tag using JQuery
- How to cancel/abort jQuery AJAX file upload
- import Blueimp jQuery File Upload in webpack
- jQuery Validate plugin for multiple file upload validation
- JQuery / AJAX File Upload using FormData, file not posting
- jQuery File Upload by Blueimp: hide existings files
- Blueimp jQuery File Upload Integrated with Asp.Net
More Query from same tag
- window.location.href appends instead or redirecting
- Positioning the element second time using JQuery UI's position does not work as expcted
- image invisible after adding div
- Implement "Remember Me" option in a PhoneGap application
- Remove stop button in slides.js?
- Javascript alter display based on URL
- Dissable buttonset on click
- Style scrollbar with jScroll
- How do you add an AJAX call to a WCF web service to an ASP.NET web page using jQuery?
- JQuery event only fires once
- Beginners question: Variable in Javascript
- jquery update class of the same name throughout page
- jquery: Variables return NaN
- Simple nested ul li menu with hover effect but issue regarding margin-top
- Jquery DataTable get data from row selected on click of button
- Bootstrap tooltip is appearing as the default tooltip
- How to get a style property with multiple values in jquery?
- Infinite scroll with photoswipe
- How to call getSelectedValues on a SELECT with MaterializeCSS
- Notifying users of database changes
- IO: Error #2038 jquery uploadify firefox latest
- Ajax Call 404 Not Found
- jquery form submission prevent default
- jQuery multiple variable not working on same page
- 'More details' button pushes row of images out of line
- JavaScript/ jQuery for Closing Browser FireFox / Chrome / IE
- Trouble dynamically loading smoothdivscroll
- Why am I getting Illegal Token when outputting JavaScript from PHP?
- Unable to Control Button Style and Hover Style
- jQuery: After Validation Error, my Input Mask function doesn't work on field