7eb7cef1b9
* Upgrade Stimulus to 2.0 * Convert ArticleController to use Stimulus 2 * Convert ModalController to Stimulus 2 * Convert BufferController to Stimulus 2 * Convert ConfigController to use Stimuus 2 * Convert ImageUploadController to Stimulus 2 * Convert Reaction controller to Stimulus 2
48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import { Controller } from 'stimulus';
|
|
|
|
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];
|
|
let 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);
|
|
});
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|