Hello, I have re-written 2 applications that used older versions of Rails 3.2 and 4.2 and re-wrote them to current v6.1.4.1
Both of these apps use this gem (indirectly they technically use the s3_direct_upload gem which uses your jquery-fileupload-rails gem).
Just to ensure it wasn't the s3_direct_upload gem I built a brand new Rails 6.1.4.1 app without Webpacker (using the regular asset pipeline) on Rails 6 using Ryan Bates example painting app to confirm the issue.
I am using a known working S3 bucket with known working keys and ID etc. I know this because I have the Original versions of the 2 apps I am working on re-writing still working on Heroku so I know it isn't a CORS issue etc. (besides the fact I experimented with every kind of CORS setting on planet earth, none of which made any difference).
The error I am getting on all 3 of the apps is POST 403 (Forbidden).
Can you guys confirm if this gem DOES work with Rails 6? If not do you have any idea how I can get it to work?
My apps view the pictures fine. In the case of the Ryan Bates Painting app I can't get an image to upload in that apps case so I can't confirm the view but again in all 3 of the Apps situations I am getting the very same error message with that POST 403 (Forbidden).
I used part of Ryan Bate's JavaScript to get the FAIL log and it really doesn't tell me anything useful.
Here is the dump from the console in case any of this means anything to you nice folks...
(I changed the bucket name to MYBUCKET it is obviously not that. :) )
POST https://MYBUCKET.s3.amazonaws.com/ 403 (Forbidden) (anonymous) @ VM3692:1 XMLHttpRequest.send @ includes.js?v=35a79b300ab5afa978cb59af0b05e059:839 send @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:10254 ajax @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:9738 send @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13646 _onSend @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13708 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12078 data.submit @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13414 add @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:14375 _trigger @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12478 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13777 each @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:370 _onAdd @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13770 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12078 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13975 fire @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:3232 add @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:3291 always @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:3400 _onChange @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13965 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12078 handlerProxy @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12389 dispatch @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:5226 elemData.handle @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:4878 application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:14438 Upload failed: application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:14439 {disabled: false, create: null, dropZone: jQuery.fn.init(1), replaceFileInput: true, singleFileUploads: true, …}abort: ƒ ()add: ƒ (e, data)autoUpload: truebitrate: 1645390.4761904762bitrateInterval: 500blob: nullcache: falsecontentType: falsecontext: jQuery.fn.init [div#upload_eq38hayegan.upload]create: nulldata: FormData {}disabled: falsedone: ƒ (e, data)dropZone: jQuery.fn.init [div#before-pictures-dropzone.well.dropzone, context: document, selector: '#before-pictures-dropzone']errorThrown: "Forbidden"fail: ƒ (e, data)fileInput: jQuery.fn.init [input#before_photo, context: input#before_photo]0: input#before_photocontext: input#before_photolength: 1[[Prototype]]: Object(0)fileInputClone: jQuery.fn.init [input#before_photo, prevObject: jQuery.fn.init(1), context: input#before_photo]0: input#before_photocontext: input#before_photolength: 1prevObject: jQuery.fn.init [input#before_photo, context: input#before_photo][[Prototype]]: Object(0)files: [File]forceIframeTransport: falseform: jQuery.fn.init [form#attachment_before, context: form#attachment_before]formAcceptCharset: "UTF-8"formData: ƒ (form)headers: {}[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()i18n: ƒ (message, context)arguments: (...)caller: (...)length: 2name: "i18n"prototype: {constructor: ƒ}[[FunctionLocation]]: application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12916[[Prototype]]: ƒ ()[[Scopes]]: Scopes[2]jqXHR: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}limitMultiFileUploadSizeOverhead: 512loaded: 86383messages: {uploadedBytes: 'Uploaded bytes exceed file size'}uploadedBytes: "Uploaded bytes exceed file size"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()multipart: trueoriginalFiles: [File]paramName: ['file']pasteZone: jQuery.fn.init {}process: ƒ (resolveFunc, rejectFunc)processData: falseprocessing: ƒ ()progress: ƒ ()progressInterval: 100recalculateProgress: truereplaceFileInput: trueresponse: ƒ ()sequentialUploads: falsesingleFileUploads: truestart: ƒ (e)state: ƒ ()submit: ƒ ()textStatus: "error"timeout: 0total: 86383type: "POST"uploadedBytes: 0url: "https://MYBUCKET.s3.amazonaws.com/"xhr: ƒ ()_bitrateTimer: {_super: undefined, _superApply: undefined, timestamp: 1634768499443, loaded: 86383, bitrate: 1645390.4761904762, …}_progress: {loaded: 86383, total: 86383, bitrate: 1645390.4761904762}_response: {jqXHR: {…}, textStatus: 'error', errorThrown: 'Forbidden'}_time: 1634768499443[[Prototype]]: Object
I have been beating my brain out on this for a week or more now not making 1 inch of progress.
Javascript fires off correctly, progress bars start to build or fully build if the file is small enough, but in ANY event I get the very same error. I even tried the ADMIN key for the same S3 account, tried other buckets (again with known working keys, CORS Policies, etc.)
What is really driving me nuts is again the 2 apps that are using the s3_direct_upload gem that uses your gem (both work) with the same keys/bucket information. I don't know what would have changed on Rails 6 that would stop this gem from working but I can only assume it has something to do with that. I would love to try an earlier version of Rails but I have been unable to get ANY earlier version of Rails working on Anything. I can get the current version and it works just fine.
Any help or ideas or ANYTHING would be GREATLY appreciated.
If you need any other information or would like me to share any additional information I would be MORE than happy to.
I am very new to Ruby on Rails and Web Development in general. I have built a good number of working apps at this point so I don't think I am doing anything wrong. If you think I am I would like to know what it is...
Hello, I have re-written 2 applications that used older versions of Rails 3.2 and 4.2 and re-wrote them to current v6.1.4.1 Both of these apps use this gem (indirectly they technically use the s3_direct_upload gem which uses your jquery-fileupload-rails gem).
Just to ensure it wasn't the s3_direct_upload gem I built a brand new Rails 6.1.4.1 app without Webpacker (using the regular asset pipeline) on Rails 6 using Ryan Bates example painting app to confirm the issue.
To be clear this is the APP I am referring to: https://github.com/railscasts/383-uploading-to-amazon-s3/tree/master/gallery-jquery-fileupload
I am using a known working S3 bucket with known working keys and ID etc. I know this because I have the Original versions of the 2 apps I am working on re-writing still working on Heroku so I know it isn't a CORS issue etc. (besides the fact I experimented with every kind of CORS setting on planet earth, none of which made any difference).
The error I am getting on all 3 of the apps is POST 403 (Forbidden).
Can you guys confirm if this gem DOES work with Rails 6? If not do you have any idea how I can get it to work? My apps view the pictures fine. In the case of the Ryan Bates Painting app I can't get an image to upload in that apps case so I can't confirm the view but again in all 3 of the Apps situations I am getting the very same error message with that POST 403 (Forbidden).
I used part of Ryan Bate's JavaScript to get the FAIL log and it really doesn't tell me anything useful.
Here is the dump from the console in case any of this means anything to you nice folks... (I changed the bucket name to MYBUCKET it is obviously not that. :) )
POST https://MYBUCKET.s3.amazonaws.com/ 403 (Forbidden) (anonymous) @ VM3692:1 XMLHttpRequest.send @ includes.js?v=35a79b300ab5afa978cb59af0b05e059:839 send @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:10254 ajax @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:9738 send @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13646 _onSend @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13708 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12078 data.submit @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13414 add @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:14375 _trigger @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12478 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13777 each @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:370 _onAdd @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13770 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12078 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13975 fire @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:3232 add @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:3291 always @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:3400 _onChange @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:13965 (anonymous) @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12078 handlerProxy @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12389 dispatch @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:5226 elemData.handle @ application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:4878 application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:14438 Upload failed: application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:14439 {disabled: false, create: null, dropZone: jQuery.fn.init(1), replaceFileInput: true, singleFileUploads: true, …}abort: ƒ ()add: ƒ (e, data)autoUpload: truebitrate: 1645390.4761904762bitrateInterval: 500blob: nullcache: falsecontentType: falsecontext: jQuery.fn.init [div#upload_eq38hayegan.upload]create: nulldata: FormData {}disabled: falsedone: ƒ (e, data)dropZone: jQuery.fn.init [div#before-pictures-dropzone.well.dropzone, context: document, selector: '#before-pictures-dropzone']errorThrown: "Forbidden"fail: ƒ (e, data)fileInput: jQuery.fn.init [input#before_photo, context: input#before_photo]0: input#before_photocontext: input#before_photolength: 1[[Prototype]]: Object(0)fileInputClone: jQuery.fn.init [input#before_photo, prevObject: jQuery.fn.init(1), context: input#before_photo]0: input#before_photocontext: input#before_photolength: 1prevObject: jQuery.fn.init [input#before_photo, context: input#before_photo][[Prototype]]: Object(0)files: [File]forceIframeTransport: falseform: jQuery.fn.init [form#attachment_before, context: form#attachment_before]formAcceptCharset: "UTF-8"formData: ƒ (form)headers: {}[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()i18n: ƒ (message, context)arguments: (...)caller: (...)length: 2name: "i18n"prototype: {constructor: ƒ}[[FunctionLocation]]: application-c24f8496b74e37ed951b517eb53daac49c7c8be5d2307e5af5413626d42a478c.js:12916[[Prototype]]: ƒ ()[[Scopes]]: Scopes[2]jqXHR: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}limitMultiFileUploadSizeOverhead: 512loaded: 86383messages: {uploadedBytes: 'Uploaded bytes exceed file size'}uploadedBytes: "Uploaded bytes exceed file size"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()multipart: trueoriginalFiles: [File]paramName: ['file']pasteZone: jQuery.fn.init {}process: ƒ (resolveFunc, rejectFunc)processData: falseprocessing: ƒ ()progress: ƒ ()progressInterval: 100recalculateProgress: truereplaceFileInput: trueresponse: ƒ ()sequentialUploads: falsesingleFileUploads: truestart: ƒ (e)state: ƒ ()submit: ƒ ()textStatus: "error"timeout: 0total: 86383type: "POST"uploadedBytes: 0url: "https://MYBUCKET.s3.amazonaws.com/"xhr: ƒ ()_bitrateTimer: {_super: undefined, _superApply: undefined, timestamp: 1634768499443, loaded: 86383, bitrate: 1645390.4761904762, …}_progress: {loaded: 86383, total: 86383, bitrate: 1645390.4761904762}_response: {jqXHR: {…}, textStatus: 'error', errorThrown: 'Forbidden'}_time: 1634768499443[[Prototype]]: ObjectI have been beating my brain out on this for a week or more now not making 1 inch of progress.Javascript fires off correctly, progress bars start to build or fully build if the file is small enough, but in ANY event I get the very same error. I even tried the ADMIN key for the same S3 account, tried other buckets (again with known working keys, CORS Policies, etc.)
What is really driving me nuts is again the 2 apps that are using the s3_direct_upload gem that uses your gem (both work) with the same keys/bucket information. I don't know what would have changed on Rails 6 that would stop this gem from working but I can only assume it has something to do with that. I would love to try an earlier version of Rails but I have been unable to get ANY earlier version of Rails working on Anything. I can get the current version and it works just fine.
Any help or ideas or ANYTHING would be GREATLY appreciated. If you need any other information or would like me to share any additional information I would be MORE than happy to. I am very new to Ruby on Rails and Web Development in general. I have built a good number of working apps at this point so I don't think I am doing anything wrong. If you think I am I would like to know what it is...
Thank You, Scott