5d00a4d967
* Show image-upload errors on /admin/advanced/tools * Simplify error handling This also makes the error message consistent with the rest of the admin validation errors, so it's probably better even if it doesn't look as flashy. * Remove obsolete clearTimeout call We aren't setting this timer anymore
54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
import { Controller } from '@hotwired/stimulus';
|
|
import { displayErrorAlert } from '../messageUtilities';
|
|
|
|
export default class ImageUploadController extends Controller {
|
|
static targets = ['fileField', 'imageResult'];
|
|
static values = { url: String };
|
|
|
|
onFormSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
const token = document.getElementsByName('authenticity_token')[0].value;
|
|
const image = this.fileFieldTarget.files[0];
|
|
const formData = new FormData();
|
|
|
|
formData.append('authenticity_token', token);
|
|
formData.append('image', image);
|
|
|
|
fetch(this.urlValue, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': window.csrfToken,
|
|
},
|
|
body: formData,
|
|
credentials: 'same-origin',
|
|
})
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
if (json.error) {
|
|
throw new Error(json.error);
|
|
}
|
|
const { links } = json;
|
|
return this.onUploadSuccess(links);
|
|
})
|
|
.catch(this.onUploadFailure);
|
|
}
|
|
|
|
onUploadSuccess(result) {
|
|
this.imageResultTarget.classList.remove('d-none');
|
|
const output = `
|
|
<div class="form-group">
|
|
<label for="output">Image URL:</label>
|
|
<textfield id="output" name="output" class="form-control" readonly>
|
|
${result}
|
|
</textfield>
|
|
</div>
|
|
<img width="300px" src=${result}>
|
|
`;
|
|
this.imageResultTarget.innerHTML = output;
|
|
}
|
|
|
|
onUploadFailure(error) {
|
|
displayErrorAlert(error.message);
|
|
}
|
|
}
|