jQuery-File-Upload | File Upload widget with multiple file selection, drag&drop support, progress bar, validation and pre | File Upload library

I have re-written 2 applications that uses older versions of Rails v3.2 and 4.2 to current Rails 6.1.4.1 In both applications cases I have everything working properly EXCEPT for the picture upload. At first I couldn't get the s3_direct_upload to work properly. Now it appears to be working, I get the progress bars starting but I get this darn POST 403 (Forbidden) error (it has the URL in the middle of the error). The s3_direct_upload gem basically just packages up the jQuery-file-upload gem to make it easier to implement after looking at its source code.

https://github.com/waynehoover/s3_direct_upload

What is strange in my case is I know it isn't a CORS issues because I am using the very same buckets, keys and everything that are CURRENTLY STILL WORKING in the original versions of these applications that still work on Heroku. Code is virtually the same the only change is the new version of Rails. BOTH give me the exact same error. IN both apps I can view pictures just fine. IT can access the buckets with the same keys ID and everything else.

I then tried and made a sample app that uses the jQuery-file-upload gem (separate from the s3_direct_upload gem) as I wanted to verify if it was the s3_direct_upload gem causing the issue OR if it is the jQuery-file-upload gem that is causing the issues.

https://github.com/railscasts/383-uploading-to-amazon-s3/tree/master/gallery-jquery-fileupload

I made a Rails 6 version of this app and got it all working and to my horror, it is giving me the EXACT SAME ISSUE, POST 403 (Forbidden) error.
I figured out how to enable the colsole.log in the JavaScript portion of the app and got it dump the error.

Here is the full error from the console. (I put MYBUCKET in caps where my bucket name would be)

I need to use a Bootstrap CSS in 4.6 as global level for every page, but on a section of one page, we need to use a 3rd party tool that uses Bootstrap CSS 3.7. Upgrading to 4.6 breaks the 3rd party tool.

Is it possible to make both versions coexist without affecting other sections of the page?

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

I have a task to edit one of our older companny asp.NET MVC app, where we uploading files using flash (uploadify) to this times. But now, we want to use Blueimp jQuery-File-Upload basic plugin.

Everything works perfect, but there is problem with unwanted submit button, which is generated (I believe) from plugin script itself.

Do you have any ideas, how to prevent genereting of this button?

Screenshot from app:

Blue area = span (class fileInputButton) which I use as a button for opening file browser window

Green area = unwanted submit button, which is generated from blueimp script

When I'm searching element on the page in browser, the result is that green area is #file-upload-button button type and come from fileupload input which is in partial cshtml view:

I was refactoring jQuery file upload to Axios.

When jQuery file upload making a request(upload a jpg file), I've noticed this kind of payload in Chrome dev tools

view source

If I want to make the same payload as jQuery file upload did in Axios, I will have to do this: