custom file input na selectie formsubmit probleem

Door Daniel van Seggelen op 06-10-2016 19:56 gewijzigd op 06-10-2016 21:10

2.050 views

Hi

Ik heb een eigen knop, die ik gebruik om de verborgen <input type='file'> te triggeren:
Waarom, omdat de default file type knop enorm lelijk is.

De html:

                            <form id="imageUploadForm" action="<?=HTML_ROOT.'inc/editphotoAjax.php'?>" enctype="multipart/form-data" >	 
                                   <input type="file" name="plaatje" id="newfotoReal" style="display:none"/>
                                    <input type="hidden" name="actie" value="add"/>
                                    <input type="hidden" name="seo_title" value="<?=$seo_title?>" />
                                    <input type="hidden" name="soort" value="fotoedit"/>
                            </form>

	 $(document).delegate('#newfoto', 'click', function(t){

			$("#newfotoReal").trigger('click');	
		})

Hierboven is de trigger zodat ik een bestand kan selecteren, een plaatje in dit geval.

Vervolgens als het plaatje geselecteerd is gebruik ik:

$(document).on('change', '#newfotoReal', function() {
        $("#imageUploadForm").submit();
    });

Vervolgens word de werkelijke normale submit geannuleerd, zodat je op dezelfde pagina blijft, met ajax word dit zo gedaan:

 $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
		$(".loading-div").show();
        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
				
				if (data!=="")
				{
				
					message = '<div style="padding-top: 10px" ><span id="popmessage">'+data+'</span><br><br></div>';
					$('.popup').html(message);
					$('.overlay').show();
					$('.popup').show();

						$('.popup').center();
						$(window).resize(function(){
					   $('.popup').center();
						});	
				$(".loading-div").hide();
				fotoref();
				}
				
            },
            error: function(data){
                console.log("error");
                console.log(data);
				
            }
        });
    }));

Dit werkt verder de eerste keer, maar de tweede keer, gaat hij gewoon de normale submit doorvoeren en dan gaat hij ook daadwerkelijk naar:

http://mijndomein.nl/editphotoAjax.php?plaatje=1.jpg&actie=add&titelteksttogether&soort=fotoedit

Hoe kan ik dit altijd laten werken? en niet alleen de eerste keer?

bedankt

Daniek

Frank Nietbelangrijk

07-10-2016 00:30

Het antwoord op je vraag weet ik zo even niet, maar ik weet wel dat de events die aan een HTML element hebt hangen verwijderd worden wanneer het element verwijderd wordt. Dit gebeurt doorgaans als je een gedeelte van je HTML vernieuwt met AJAX. Dus komt er met ajax een nieuwe '#newfotoReal' fileupload knop ? zo ja: laat javascript dan ook een nieuw onchange event aan deze knop hangen.

Verder valt me op dat je omslachtig te werk gaat. met het onchange event ga je eerst een onclick event afvuren. waarom? je kunt toch toch ook direct direct je ajax request doen?

Daniel van Seggelen

07-10-2016 04:31

Beste Frank,

Nee eerst een onclick event, dan een onchange event, in de onchange wordt het submitten van het formulier gedaan.
De onchange is wanneer je daarwerkelijk een bestand geselecteerd hebt.

Als ik direct na de onclick de ajax afvuur, dan word dit gedaan zonder dat het bestand geselecteerd is.
Of heb je een andere oplossing?

Frank Nietbelangrijk

07-10-2016 11:54

Daniel,

Je kunt gewoon controleren of er een bestand geselecteerd is:


if( document.getElementById("newfotoReal").files.length == 0 ){
    console.log("no files selected");
}

Tevens kun je na de upload de waarde van je file-upload knop weer resetten:


document.getElementById("newfotoReal").value = "";

[size=xsmall]Toevoeging op 07/10/2016 12:26:04:[/size]

Misschien helpt dit: http://codepen.io/anon/pen/WGrXXx


$(function()
{
  var uploadButton = document.getElementById("newfotoReal");
  
  // controlle van het bestand voordat je met uploaden begint
  function validateFileUpload()
  {
    if( uploadButton.files.length == 0 )
    {
      console.log("no file selected");
      return false;
    }

    return true;
  }

  // daadwerkelijke upload na een geslaagde validatie
  function doFilUpload()
  {
    console.log('upload file now!');

    // hier je AJAX fileupload invoegen

    // reset de file-upload button
    uploadButton.value = "";
  }

  $(document).on('click', '#newfoto', function() {
    $("#newfotoReal").trigger('click');
  });

  $(document).on('change', '#newfotoReal', function() {
    if(validateFileUpload()) {
      doFilUpload();
    }
  });

});

Daniel van Seggelen

07-10-2016 14:11

Het probleem is precies hetzelde als voorheen, Ik krijg in de codelelog:

no file selected

function doFilUpload()
{
console.log('upload file now!');
$("#imageUploadForm").submit();
// hier je AJAX fileupload invoegen

// reset de file-upload button
uploadButton.value = "";
}

ik heb de submit toegevoegd in do file upload.

Als ik direct de ajax doe, met de form data:

var formData = new FormData($('#imageUploadForm')[0]);

Leuk en aardig, maar er gebeurd niks.

Dus dit is geen oplossing helaas.

[size=xsmall]Toevoeging op 07/10/2016 14:45:36:[/size]

UPDATE<

Ik zie het probleem al. Het formulier:

<form id="imageUploadForm" action="<?=HTML_ROOT.'inc/editphotoAjax.php'?>" enctype="multipart/form-data" >
<input type="file" name="plaatje" id="newfotoReal" style="display:none"/>
<input type="hidden" name="actie" value="add"/>
<input type="hidden" name="seo_title" value="<?=$seo_title?>" />
<input type="hidden" name="soort" value="fotoedit"/>
</form>

Die werd ook opnieuw in ajax teruggegeven.
Dat moest ik buiten de ajaxcall laten en dan blijft het werken.

Reageren

Inloggen om te reageren