Perfect! Thank you.
Friend, one thing I forgot to ask: What is the best way, after clicking the submit button, record in the database the value typed in an input. This value would be the name of the gallery.
In PHP I can do, I’m asking about Javascript.
I would think you would do this in PHP shortly after the move_uploaded_file() statement.
Well this is not my question. It’s about JavaScript.
It would be something like this?
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.setRequestHeader("X_TITLE", titleGallery);
xhr.send(file);
Oh, I see. I mis-understood. So you will have a text box on the page where the user enters a gallery name?
Then yes, you are on a good start, but you will likely want to change your code to this:
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.setRequestHeader("X_TITLE", $id('id_of_input_field').value);
xhr.send(file);
This! Very good.
I think it would be safer to “liberate” the area to upload files and submit button only if the title of the gallery is entered. It is very difficult to do this with jQuery?
You just need to update the following
function UploadFiles(e) {
e.stopPropagation();
e.preventDefault();
// process all File objects
while (filesThatWereDropped.length > 0) {
var f = filesThatWereDropped.pop();
UploadFile(f);
}
}
To
function UploadFiles(e) {
e.stopPropagation();
e.preventDefault();
var regexRemoveSpaces = /[\\s]+/gi;
if ($id('id_of_gallery_input').value.replace(regexRemoveSpaces, '').length !== '') // Do not allow it to be empty or just filled with spaces
{
// process all File objects
while (filesThatWereDropped.length > 0) {
var f = filesThatWereDropped.pop();
UploadFile(f);
}
}
}
It did not work. Is not it better to just change the css class?
Okay, maybe I’m not understanding what you want to do. The code I gave you should stop the upload button from working so long as the Gallery input field is empty. Once the gallery field is entered, the upload button should function.
Yes, you understood correctly, but did not work.
Even without entering any value in the input, you can drop files and click the submit button.
Sorry, I forgot I did a .length on the field instead of just referencing the value. Below is the corrected code.
function UploadFiles(e) {
e.stopPropagation();
e.preventDefault();
var regexRemoveSpaces = /[\\s]+/gi;
if ($id('id_of_gallery_input').value.replace(regexRemoveSpaces, '').length !== 0) // Do not allow it to be empty or just filled with spaces
{
// process all File objects
while (filesThatWereDropped.length > 0) {
var f = filesThatWereDropped.pop();
UploadFile(f);
}
}
}
Also, I’d probably add another div or something to the page with an id of ‘error’, so you can tell the user what went wrong. Using your CSS, have it set to display: none and then in the JavaScript, add an else statement to run the following
$('error').style.display = 'block';
Now it worked. I have to enable the submit button only if the input has any value?
To do that you will want to use an onkeyup event on your gallery textbox that then sents the .disabled property of the button to ‘’ when there is text entered, otherwise, set it to ‘disabled’ when there is no text entered
And how do I? pod eme help? My conhecimenro in jquery and javascript is null.
With jQuery you can do something like so:
$('#titulo').bind('keyup', function() {
if ($(this).val().length != 0)
{
$('#btnSubmit').attr('disabled', '');
}
else
{
$('#btnSubmit').attr('disabled', 'disabled');
}
});
You would also want to disable the button in your HTML so when the page is first loaded, it is automatically disabled by adding disabled=“disabled” to it.
Now it’s perfect, I made some more changes. Thank you.
I noticed that after clicking the submit button, if you drop a file over the current upload is interrupted. Is to prevent files from being released after clicking the submit button?
Please note, this does not replace your jQuery code, so keep that logic, this only replaces the logic behind your upload, but try this
(function() {
var filesThatWereDropped = new Array();
// getElementById
function $id(id) {
return document.getElementById(id);
}
// output information
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
// file drag hover
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
function FileSelectHandler(e) {
// cancel event and hover styling
FileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
}
}
function UploadFiles(e) {
e.stopPropagation();
e.preventDefault();
var regexRemoveSpaces = /[\\s]+/gi;
if ($id('titulo').value.replace(regexRemoveSpaces, '').length !== 0) // Do not allow it to be empty or just filled with spaces
{
// process all File objects
while (filesThatWereDropped.length > 0) {
var f = filesThatWereDropped.pop();
UploadFile(f);
}
}else{
$('error').style.display = 'block';
}
}
var SAFE_FILE_NAME = new RegExp("[^a-z0-9]+", "gi"); // Added this line to define the acceptable characters to use for the id of the new progress bar location
// output file information
function ParseFile(file) {
Output(
"<div style=\\"float: left;\\">File information: <strong>" + file.name +
"</strong> type: <strong>" + file.type +
"</strong> size: <strong>" + file.size +
"</strong> bytes</div>" +
//Added this line to create the new progress bar location
"<div style=\\"float: left; margin-left: 2em;\\" class=\\"progress\\" id=\\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\\">" +
"<p id=\\"upload_" + file.name.replace(SAFE_FILE_NAME, '') + "\\">0%</p>" +
"</div>" +
"<br style=\\"clear:left;\\" />"
);
// display text
if (file.type.indexOf("text") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"<p><strong>" + file.name + ":</strong></p><pre>" +
e.target.result.replace(/</g, "<").replace(/>/g, ">") +
"</pre>"
);
}
reader.readAsText(file);
}
filesThatWereDropped.push(file);
}
// upload JPEG files
function UploadFile(file) {
$id("filedrag").removeEventListener("drop", FileSelectHandler, false);
// following line is not necessary: prevents running on SitePoint servers
if (location.host.indexOf("sitepointstatic") >= 0) return
var xhr = new XMLHttpRequest();
if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" || file.type == "image/gif" || file.type == "video/avi" && file.size <= $id("MAX_FILE_SIZE").value) {
// create progress bar
var o = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
var progress = $id("upload_" + file.name.replace(SAFE_FILE_NAME, '')); // o.appendChild(document.createElement("p"));
//progress.appendChild(document.createTextNode("upload " + file.name));
// progress bar
xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt(100 - (e.loaded / e.total * 100));
progress.style.backgroundPosition = pc + "% 0";
progress.innerText = Math.round(e.loaded / e.total * 100) + "%";
}, false);
// file received/failed
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
progress.className = (xhr.status == 200 ? "success" : "failure");
$id("filedrag").addEventListener("drop", FileSelectHandler, false);
}
};
// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.setRequestHeader("X_TITULO", $id('titulo').value);
xhr.send(file);
}
}
// initialize
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("btnSubmit");
// file select
fileselect.addEventListener("change", FileSelectHandler, false);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
submitbutton.addEventListener("click", UploadFiles, false);
}
}
// call initialization file
if (window.File && window.FileList && window.FileReader) {
Init();
}
})();
It removes the drop event listener when uploading and re-enables it once the upload completes.
It did not work, the upload is still broken.