Para subir los archivos use la libreria: https://hayageek.com/docs/jquery-upload-file.php
<script src="/libs/jQuery_Upload/jquery.uploadfile.min.js"></script>
<link href="/libs/jQuery_Upload/uploadfile.css" rel="stylesheet">
<div id="multipleupload" class="mt-4">Upload</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
initializeUploadFile("#multipleupload", {
modelName: "<%= @embarque.class.name %>",
modelId: "<%= @embarque.id %>",
uploader: "guia_pdf"
});
});
</script>
Metodo en Js para inicializar el formulario
function initializeUploadFile(selector, options) {
const defaultOptions = {
url: `/storage/${options.modelName}/${options.modelId}/${options.uploader}?authenticity_token=${$('meta[name=csrf-token]').attr('content')}`,
multiple: false,
dragDrop: true,
fileName: "file",
sequential: true,
sequentialCount: 1,
showProgress: true,
showDone: true,
showStatusAfterSuccess: true,
acceptFiles: 'pdf',
allowedTypes: 'pdf',
returnType: 'json',
uploadStr: "Subir",
doneStr: "Completado",
showError: false,
onError: function (files, status, errMsg, pd) {
if (errMsg == 'Conflict') {
$(pd.statusbar).append("<span>ERROR: La factura ya está en el sistema.</span><br>");
} else if (errMsg == 'Unprocessable Entity') {
$(pd.statusbar).append("<span>ERROR: El RFC no coincide.</span><br>");
}
}
};
// Merge default options with provided options
const finalOptions = Object.assign({}, defaultOptions, options);
$(selector).uploadFile(finalOptions);
}

