Fix JS and JS-based image upload
This commit is contained in:
parent
36984ff1d4
commit
fa8a7fc77a
6 changed files with 95 additions and 51 deletions
|
|
@ -1,21 +1,23 @@
|
|||
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
|
||||
import "@hotwired/turbo-rails"
|
||||
import "controllers"
|
||||
// import "@hotwired/turbo-rails"
|
||||
// import "controllers"
|
||||
|
||||
// Initialize the upload form.
|
||||
function upload_form_init() {
|
||||
// Disable the submit button if Javascript is supported.
|
||||
// Upload will start right after selecting images.
|
||||
// $("#file-submit").hide();
|
||||
document.getElementById("file-submit").style.display = "none";
|
||||
const fileSubmit = document.getElementById("file-submit");
|
||||
if (fileSubmit)
|
||||
{
|
||||
fileSubmit.style.display = "none";
|
||||
}
|
||||
|
||||
// Install event handler to notice when files were selected.
|
||||
// $("#file").on("change", upload_form_files_selected);
|
||||
document.getElementById("file").addEventListener("change", upload_form_files_selected);
|
||||
document.getElementById("file")?.addEventListener("change", upload_form_files_selected);
|
||||
}
|
||||
|
||||
function upload_form_files_selected() {
|
||||
no_files = this.files.length;
|
||||
var no_files = this.files.length;
|
||||
if (no_files > 0) {
|
||||
document.getElementById("file-label").innerHTML = `${no_files} files selected - uploading…`;
|
||||
document.getElementById("file-select-button").disabled = true;
|
||||
|
|
@ -28,7 +30,7 @@ function upload_form_files_selected() {
|
|||
}
|
||||
|
||||
// Handle Ctrl-V to paste an image directly
|
||||
export function upload_paste_handler(event) {
|
||||
function upload_paste_handler(event, uploadUrl) {
|
||||
console.log("paste!");
|
||||
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
|
||||
|
||||
|
|
@ -48,45 +50,48 @@ export function upload_paste_handler(event) {
|
|||
console.log(item.type);
|
||||
var file = item.getAsFile();
|
||||
console.log(file);
|
||||
upload_file_with_ajax(file);
|
||||
upload_file_with_ajax(file, uploadUrl);
|
||||
}
|
||||
}
|
||||
|
||||
function upload_file_with_ajax(file) {
|
||||
function upload_file_with_ajax(file, uploadUrl) {
|
||||
if (file == null) {
|
||||
console.log("File was null. Strange.");
|
||||
display_error("Maybe the image was too large.");
|
||||
return;
|
||||
}
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("file", file);
|
||||
console.log(formData);
|
||||
|
||||
fetch(ajax_upload_url, {
|
||||
fetch(uploadUrl, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
headers: {
|
||||
"X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content,
|
||||
// 'Content-Type' is omitted to let the browser set it automatically
|
||||
// with the proper boundary for FormData
|
||||
},
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
console.log(`AJAX file upload returned error: ${response.statusText}`);
|
||||
display_error(errorData);
|
||||
throw new Error("Upload failed");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("AJAX file upload was ok");
|
||||
window.location.replace(after_upload_url);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.message !== "Upload failed") {
|
||||
console.log(`AJAX file upload error: ${error}`);
|
||||
}
|
||||
});
|
||||
.then(async (response) => {
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
console.log(`AJAX file upload returned error: ${response.statusText}`);
|
||||
display_error(errorData);
|
||||
throw new Error("Upload failed");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("AJAX file upload was ok");
|
||||
window.location.replace(after_upload_url);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.message !== "Upload failed") {
|
||||
console.log(`AJAX file upload error: ${error}`);
|
||||
}
|
||||
});
|
||||
|
||||
// $.ajax(ajax_upload_url, {
|
||||
// type: "POST",
|
||||
|
|
@ -107,7 +112,8 @@ function upload_file_with_ajax(file) {
|
|||
// });
|
||||
}
|
||||
|
||||
function display_error(msg) {
|
||||
function display_error(msg) { console.log("foo");
|
||||
|
||||
// $("#messages").html(
|
||||
// '<div class="callout alert alert-callout-subtle radius">Sorry, pasting did not work. ' + msg + "</div>"
|
||||
// );
|
||||
|
|
@ -117,3 +123,21 @@ function display_error(msg) {
|
|||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
console.log("DOM loaded");
|
||||
// Handle uploads on specific views/pages. The DIV with ID
|
||||
// #data-js-upload-form carries data attributes that tell us where
|
||||
// uploads will be sent from Javascript.
|
||||
let element = document.getElementById("data-js-upload-form");
|
||||
|
||||
if (element) {
|
||||
console.log("upload_form_init");
|
||||
// console.log(element.dataset);
|
||||
// console.log(element.dataset.uploadUrl);
|
||||
upload_form_init(element.dataset.uploadUrl);
|
||||
// document.onpaste = upload_paste_handler(element.dataset.uploadUrl);
|
||||
document.onpaste = function(event) { upload_paste_handler(event, element.dataset.uploadUrl); }
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue