40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
import { Controller} from '@hotwired/stimulus'
|
|
|
|
export default class extends Controller {
|
|
static targets = ['input', 'feedback']
|
|
|
|
static values = {
|
|
uploadMaxsizeByFile: Number, // max size by image allowed
|
|
uploadMaxItems: Number, // max number of images allowed
|
|
currentImagesCount: Number, // number of images already uploaded
|
|
feedbackMessage: String, // image too too big feedback
|
|
maxImagesError: String, // count threshold reached error
|
|
}
|
|
|
|
/**
|
|
* 1. Check the size of each file. Remove the selected files if one is incorrect.
|
|
* 2. Check the number of images uploaded.
|
|
*/
|
|
checkUpload() {
|
|
const maxAllowedImages = this.uploadMaxItemsValue - this.currentImagesCountValue
|
|
if (maxAllowedImages < this.inputTarget.files.length) {
|
|
this.feedbackTarget.innerHTML = this.maxImagesErrorValue
|
|
this.inputTarget.value = ''
|
|
|
|
return
|
|
}
|
|
|
|
const uploadMaxsizeByFile = 1048576 * this.uploadMaxsizeByFileValue
|
|
let feedback = []
|
|
for (let file of this.inputTarget.files) {
|
|
if (file.size > uploadMaxsizeByFile) {
|
|
feedback.push(this.feedbackMessageValue.replace('%file%', file.name))
|
|
}
|
|
}
|
|
|
|
if (feedback.length > 0) {
|
|
this.feedbackTarget.innerHTML = feedback.join('<br/>')
|
|
this.inputTarget.value = ''
|
|
}
|
|
}
|
|
}
|