JS and HTML Form Code

Version: PHPbb3

Details:
So I am trying to make a code where you can upload a picture from your computer and submit it, and when you do submit it it sends me (the admin) a PM of the picture. I have the code for it, the upload works, and everything else works but when I hit submit it bring me to a weird page where it says "go back to forum index..." so

Here's the code:

Code:

<script type="text/javascript">
      function fileSelected() {
      var file = document.getElementById('fileToUpload').files[0]
      if (file) {
      var fileSize = 0;
      if (size.size > 1024 * 1024)
      fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
      else
      fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
      
      document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
      document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
      document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
      }
      }
      
      function uploadFile() {
      var fd = new FormData();
      fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", uploadProgress, false);
      xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      xhr.open("POST","upload.php");
      xhr.send(fd);
      }
      
      function uploadProgress(evt) {
      if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
      }
      else {
      document.getElementById('progressNumber').innerHTML = 'unable to compute';
      }
      }
      
      function uploadComplete(evt) {
      /*This event is raised when the server send back a response*/
      alert(evt.target.responseText);
      }
      
      function uploadFailed(evt) {
      alert("There was an error attempting to upload the file.");
      }
      
      function uploadCanceled(evt) {
      alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
    </script>

<form id="form1, privatemessage" enctype="multipart/form-data" method="post" action="upload.php" action="/privmsg" name="post">
Username: <br>
<input type="text" name="username" value="">
<br>
   <div class="row">
               <label for="fileToUpload">Select a File to Upload</label><br />        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" />      
   </div>           
   <div id="fileName">          </div>           
   <div id="fileSize">       </div>      
   <div id="FileType">    </div>
           
   <div class="row">
               <input type="button" onclick="uploadFile()" value="Upload" />          </div>
              <div id="progressNumber">
          </div>


<input name="username[]" type="text" style="display:none" value="Usernames"/>
  <input type="text" id="usernameSender" name="username[]" value="Finery Workshop" style="display:none"/>
<input maxlength="64" style="display:none" name="subject" type="text" class="usernameinput" value="Purchase"/>
  <textarea id="cartMessage" style="display:none" class="noThis" name="Boutique Entry" >


</textarea>
<input type="submit" class="sendingBut" name="post" value="Submit" />
</form>

this wont work and the upload does not work either it fools you to make u think it works

you would need the upload.php page for it to work and we do not have acess to the database to use php pages so this will never work

but you give me a couple days i can make you somthing

just have few questions

where will this upload button be located?
is it on a html page?
do you want a predefined subject?
and do you want the users to be able to enter a message?

and any other details you think i might need

_Twisted_Mods_ wrote:this wont work and the upload does not work either it fools you to make u think it works

you would need the upload.php page for it to work and we do not have acess to the database to use php pages so this will never work

but you give me a couple days i can make you somthing

just have few questions

where will this upload button be located?
is it on a html page?
do you want a predefined subject?
and do you want the users to be able to enter a message?

and any other details you think i might need

Ohh okay

That would be so amazing ♥ Thank you so much if you can do it

(Sorry if I misunderstand this question) Between the Username place and the submit button ^-^
Yes, I was planning on it
Yes, if that's okay. Is it okay if the subject is: Contest Entry 
No, just for them to be able to put their image in
Uhm, I don't think any other details. ^-^ 

Would you need the CSS for the buttons or would I just add that in?
And thank you so much again if you're able to do it

i will give it an id so you can add your own css ..oh one more thing i forgot .. sense you are using a html page will you have the header and footer activated on it?

_Twisted_Mods_ wrote:i will give it an id so you can add your own css ..oh one more thing i forgot .. sense you are using a html page will you have the header and footer activated on it?

Okay! And yes

hi there
can i add something
in order to make sure the image upload will work good you would need storage space that is forumotion dose not have it so if the Script used an image host service or make your own free host service then make the script use the space this might make it work
its just idea if im wrong please correct me

yea im gonna use filepicker to upload the images to ..so you will just need to create a account with them and get the api# they give you but i will give all the info needed when i finish

ok first goto https://developers.filepicker.io/register/free and crate an account this will be used to upload the images to

after you create an account ..

click create app

name: your choice

Which Filepicker.io file SDK(s) are you planning to use? WEB

skip the logo upload step

3rd step will give you a API Key copy it you will need it for the script below


Now for the rest

html buttons and inputbox

Code:

<input id="imgbox" type="text">
<input type="button" id="imguplbtn" value="Upload Image" onclick="getPick()">
<input type="button" id="subbtn" value="Submit" onclick="sendthemsg()">

add these anywhere in the html page you like

1st: is the input box for the image url
2nd: the upload button
3rd: is the submit button to send the message


now you will need to add this script to very bottom of your html page

Code:

    <script type="text/javascript">
      jQuery(function(){
    var script = document.createElement('script');
        script.id="filepicker";
        script.type="text/javascript";
        script.src="//api.filepicker.io/v1/filepicker.js";
        var body=$('body');
        body.append(script);
    });
        function getPick(){
        var textArea = $('#imgbox');
        filepicker.setKey('yourkeyhere');
        filepicker.pick({
        mimetypes: ['text/*','image/*','video/*'],
        services:['COMPUTER','WEBCAM','VIDEO']
        },function(FPFile) {
        var docFile = FPFile.url;
        var type= FPFile.mimetype;
        var file = FPFile.url+'+'+FPFile.filename.replace(/\s/g,"");
        if(/^.*text.*$/.test(type)) {
        textArea.val(textArea.val()+'[url]'+file+'[/url]');
        } else if(/^.*image.*$/.test(type)) {
        textArea.val(file);
        }else {
        textArea.val(textArea.val()+'[flash]'+file+'[/flash]');
        };
     
        });
        };

    function sendthemsg(){
    if($('#imgbox').val()==""){alert('Upload A Image First!')}else{
    msg = '[img]'+$('#imgbox').val()+'[/img]';
      jQuery.post('http://liquidcode.forumotion.com/privmsg',{             
    subject:  'Contest Entry',
    message:  msg,
    mode:  'post',
      username:{'':'_Twisted_Mods_'},
      folder:  'inbox',
      new_pm_time: 9999999999,
    post:  1
    },function(data,status){if(data.match("Your message has been sent")){alert('Image Has Been Submitted!');$('#imgbox').val('');}else{alert('Error! please try again')};});
    };};
      </script>

replace yourkeyhere in

Code:

filepicker.setKey('yourkeyhere');

with the api key you got earlier from filepicker

then replace _Twisted_Mods_ in

Code:

username:{'':'_Twisted_Mods_'},

with your username

all done

if you have a issue with it sending messages goto acp>general>forum>security

and set

Unauthorize unofficial forms to post messages and private messages on the forum:NO

save

I added all of it in there and when I press upload image or submit nothing happens   

Do you want me to show you the code I have for it? I tested it out on a page just by itself so there's no other codes in between it.

I made an account and put in the API Key code it gave me and replaced your username with mine.

sorry my browser messed up the code should be good now

The image uploading part works perfect now, but when I hit submit nothing happens. (I got on as a different user to test it since my main one is the one the PM would go to)

you dont need to switch accounts you can pm yourself .. and did you switch the username  if so can you provide the code for your html page either here or in a pm

Here's the code I have on the test page:

Code:


<input id="imgbox" type="text">
<input type="button" id="imguplbtn" value="Upload Image" onclick="getPick()">
<input type="button" id="subbtn" value="Submit" onclick="sendthemsg()">
 
    <script type="text/javascript">
      jQuery(function(){
    var script = document.createElement('script');
        script.id="filepicker";
        script.type="text/javascript";
        script.src="//api.filepicker.io/v1/filepicker.js";
        var body=$('body');
        body.append(script);
    });
        function getPick(){
        var textArea = $('#imgbox');
        filepicker.setKey('AsbKjsZyQ16r7FQ8AHFTdz');
        filepicker.pick({
        mimetypes: ['text/*','image/*','video/*'],
        services:['COMPUTER','WEBCAM','VIDEO']
        },function(FPFile) {
        var docFile = FPFile.url;
        var type= FPFile.mimetype;
        var file = FPFile.url+'+'+FPFile.filename.replace(/\s/g,"");
        if(/^.*text.*$/.test(type)) {
        textArea.val(textArea.val()+'[url]'+file+'[/url]');
        } else if(/^.*image.*$/.test(type)) {
        textArea.val(file);
        }else {
        textArea.val(textArea.val()+'[flash]'+file+'[/flash]');
        };
      
        });
        };

    function sendthemsg(){
    if($('#imgbox').val()==""){alert('Upload A Image First!')}else{
    msg = '[img]'+$('#imgbox').val()+'[/img]';
      jQuery.post('http://liquidcode.forumotion.com/privmsg',{              
    subject:  'Contest Entry',
    message:  msg,
    mode:  'post',
      username:{'':'Finery Workshop'},
      folder:  'inbox',
      new_pm_time: 9999999999,
    post:  1
    },function(data,status){if(data.match("Your message has been sent")){alert('Image Has Been Submitted!');$('#imgbox').val('');}else{alert('Error! please try again')};});
    };};
      </script>

When I press the submit button without having an image it responds telling me I need an image but it doesn't respond when I do have an image.

seems to work fine did you do the last part

goto acp>general>forum>security

and set

Unauthorize unofficial forms to post messages and private messages on the forum:NO

save

oooh i just notice 1 other thing i missed

change

Code:

jQuery.post('http://liquidcode.forumotion.com/privmsg',{

to

Code:

jQuery.post('/privmsg',{

Thank you so much! It works now  

Thank you for helping me ^-^