0

This is my form HTML Code

<form id="PostOfficeFeed" enctype="multipart/form-data">
<input type="text" name="feed_title">
<textarea name="feed_text"></textarea>
<input type="file" name="feed_img" id="FeedImg" />
<button type="submit" id="PostOfficeBtn">Post</button>
</form>

This is my jquery and ajax code

$('#PostOfficeBtn').click(function(){
        $("#PostOfficeFeed").validate({
            rules:{
                feed_title:{required:true, minlength:10},
                feed_text:{required:true},
                feed_img:{required:false, extension:"jpg|jpeg|png"},
                feed_youtube:{required:false},
                feed_video_url:{required:false, url: true}
            },
            messages:{
                feed_title:{required:"Feed Title", minlength:"Enter Min 10 characters"},
                feed_text:{required:"Feed Description"},
                feed_img:{required:"img", extension:"Upload only jpg jpeg png files"},
                feed_youtube:{required:"img"},
                feed_video_url:{required:"url", url:"Enter Valide URl"}
            },
            submitHandler:function(){
                //Method One
                // var formData = $('#PostOfficeFeed')[0];
                // console.log(formData);
                // var data = new FormData(formData);
                // //$("#LoadingMsg").modal("show");
                // var JsonDate = JSON.stringify(
                //  Object.fromEntries(data)
                // );
                // console.log(JsonDate);


                // Method Two
                var imgFile = document.getElementById('FeedImg');
                var imgfileList = imgFile.files;
                
                if(imgfileList && imgfileList != null && imgfileList.length > 0) {
                    JsonDate.append(imgfileList[0].name, imgfileList[0].value);
                    JsonDate.append('feed_img', imgfileList[0].value);
                }

                var JsonDate = new FormData();
                var other_data = $('#PostOfficeFeed :input').serializeArray();
                $.each(other_data, function (key, input) {
                    JsonDate.append(input.name, input.value);
                });
                
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: URL+'post-feeds/test.php',
                    dataType:"json",
                    data: JsonDate,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function(data){
                        if(data.response==="success"){
                            $("#LoadingMsg").modal("hide");
                            swal("Successfully", data.message, "success");
                            $('#PostOfficeFeed')[0].reset();
                        }
                        else{
                            swal("Error", data.message, "error");
                        }
                    }
                });
            return false;
            }
        });
    });

I have tried so much but I dont know where iam missing.

  • When I am using method one: I can able to post only text input fields not with image When I am using method two: I can able to upload and post the image only

and Actually Iam looking to get both text input value and image input value would anyone please help me to correct my code or suggestions

Thank you In advance for your time and consideration

konda vamshi das
  • 1
  • In your second attempt, you are trying to call `JsonDate.append`, before you even created `JsonDate`. And in your first one, you are trying to create a FormData instance _from_ a FormData instance, which also makes little sense. And trying to serialize it as JSON, makes even less. The FormData instance _is_ what you should send to the server, no more, and no less. – CBroe Feb 22 '22 at 13:15
  • https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload – CBroe Feb 22 '22 at 13:15

0 Answers0