0
function editProfile() {
var clearBackground = document.createElement("div");
    clearBackground.setAttribute("id","clearBackgroundEdit");
    document.body.appendChild(clearBackground);

var div = document.createElement("div");
    div.setAttribute("id","editProfileContainer");
    div.innerHTML = `
    <div id="listOfOptions">
    <span class="editProfileTitle">Main Options</span>
    <div id="chooseOptions">
        <ul>
            <li id="profilePhotoEdit">Choose Profile Photo</li>
            <li id="changePasswordEdit">Change Password</li>
        </ul>
    </div>
    </div>


    <div id="uploadProfileImage">


    <span class="editProfileTitle">Upload A Profile Photo</span>

    <div id="photoUploadContainer">

    <label class="fileUploader">
    Select a Profile Image
    <input name="profileImage" id="profileImage" class="fileUploader" type="file" />
    </label>
    <input type="text" name="filePath" id="filePath" value="No File" disabled="true" />
    <span class="uploadPhoto" id="uploadPhoto">Upload</span>

    </div>

    <i id="backOptions" class="backOptions fa fa-chevron-circle-left fa-3x" aria-hidden="true"></i>

    </div>

    `;

    document.body.appendChild(div);
    JS.addListener("click","profilePhotoEdit",function() {
        JS.g("listOfOptions").style.cssText="display:none;";
        $("#editProfileContainer").animate({height: "200px", width: "900px"},function(){
            JS.g("uploadProfileImage").style.cssText="display:block;";
        });
        JS.addListener("click","uploadPhoto",goPhotoUpload);
    });
    JS.addListener("change","profileImage",function(){
        var fileType = JS.g("profileImage").value.split(".").pop().toLowerCase();

        if(fileType == "jpg" || fileType == "jpeg" || fileType == "png" || fileType == "gif") {

        if(JS.g('profileImage').value.length >=1) {

            JS.g("filePath").value = JS.g("profileImage").value;
        }
        else {
            JS.g("filePath").value = "No File";
        }

        }
        else {
            JS.g("filePath").value = "No File";
            JS.g("profileImage").value = null;
            oops("Must be a valid file type: jpg, gif, png","uploadProfileImage","152px;","400px");

        }
    });
    JS.addListener("click","clearBackgroundEdit",closeEditProfile);
    JS.addListener("click","backOptions",function(){
        JS.g("uploadProfileImage").style.cssText="display:none;";
        $("#editProfileContainer").animate({height: "150px", width: "500px"},function(){
        JS.g("listOfOptions").style.cssText="display:block;";
        JS.g("filePath").value="No File";
        });
    });
 }

 function goPhotoUpload() {
var fileType = JS.g("profileImage").value.split(".").pop().toLowerCase();

if(fileType == "jpg" || fileType == "jpeg" || fileType == "png" || fileType == "gif") {
    var uploadForm = document.createElement("form");
        uploadForm.setAttribute("method","post");
        uploadForm.setAttribute("action","/server/profilePhotoUpload.php");
        uploadForm.setAttribute("name","profilePhoto");
        uploadForm.setAttribute("id","profilePhoto");
        uploadForm.setAttribute("enctype","multipart/form-data");
        uploadForm.setAttribute("target","uploadIframe");
        document.getElementById('photoUploadContainer').appendChild(uploadForm);


    var iframe = document.createElement("iframe");
        iframe.setAttribute("id","uploadIframe");
        iframe.setAttribute("name","uploadIframe");
        iframe.setAttribute("width","500");
        iframe.setAttribute("height","500");
        iframe.setAttribute("style","display:block; width:500px; height:500px;");

        document.body.appendChild(iframe);

        JS.g("profilePhoto").submit();

        document.getElementById("uploadIframe").onload = function() {

            alert("Its fully loaded");

        }


}

else {
            JS.g("filePath").value = "No File";
            oops("Must be a valid file type: jpg, gif, png","uploadProfileImage","152px;","400px");

        }

 }

  function closeEditProfile() {
  if(JS.g("editProfileContainer") && JS.g("clearBackgroundEdit")) {
    $("#editProfileContainer").remove();
    $("#clearBackgroundEdit").remove();
  }
   }

   JS.load(function() {
   JS.addListener("click","editProfileButton",editProfile);
   })

The iframe is loading to the right page, but no post data is being sent to the page. I've been banging my head agasint the desk for about 6 hours now, not a single clue what I might be missing and or be doing wrong. The goal here is to send the post $_FILE to the profilePhotoUpload.php page so my PHP script can then handle the request. But again, no post data is making it to the page.

Thanks for any help you may have got.

Jon W
  • 39
  • 6
  • Use the browser's web inspector to see what is being sent to the server. That will help you identify where the problem is. – user2182349 Dec 11 '17 at 03:48
  • Not to sure exactly how to go about doing that. Any examples? Which browser is best for doing that? – Jon W Dec 11 '17 at 03:54
  • Either Firefox or Chrome – user2182349 Dec 11 '17 at 03:55
  • What exactly should I be looking for to help me locate where the problem is at using Chrome? – Jon W Dec 11 '17 at 04:00
  • Is it because my inputs are embed inside my JavaScript? Normally I put the inputs inside the html body, but with this site I'm wanting them to dynamically. – Jon W Dec 11 '17 at 04:23
  • this may help, you need to know what is actually being posted: https://stackoverflow.com/questions/15603561/how-can-i-debug-a-http-post-in-chrome – MEmerson Dec 11 '17 at 04:51

0 Answers0