I am designing a blogsite where everyone can write blogpost.
I am using ckeditor in the create_post.php but there is a problem:
An user could upload an image through the ckeditor and then could close the create_post.php page. So in this case an image is uploaded on the server but no one will see it because the user close the page before to post it.
Is there a way to a automatically attach images to a post after uploading ?
This is the form:
<form method="post" action="create_post.php" >
<textarea class="ckeditor" name="body" ></textarea>
<input type="submit" value="send" name="submit" />
</form>
Yes, you can use the CKEditor API to insert that image. Check this demo it automatically inserts any image that you add through various methods (drag&drop, paste, toolbar button).
But that doesn't solve your problem at all. The user can still close the page and the image will be stored but will not be used, so you should create some system to track that.
Related
Im providing a file preview option, where the user attaches a file, and then clicks preview.
Which uploads the file, and outputs a PHPExcel preview.
From that page, I want to include a button that says continue.
Which will then proceed with the actual upload and database row creation.
However once I redirect to the preview page, I have no idea how to attach this file to my hidden form for resubmission.
I can attach all the old input values....like so...
But how do I attach the file??? (using blade in laravel for templating)
/* These work and are correct*/
<input type="text" id="xlsColumnOrder" name="xlsColumnOrder" value="{{$input['xlsColumnOrder']}}"/>
<input type="text" name="researcher" value="{{$input['researcher']}}" />
<input type="text" name="leadcity" value="{{$input['leadcity']}}" />
<input size="16" id="survey_date" name="survey_date" type="text" value="{{$input['survey_date']}}" />
/* This doesnt attach anything to the file input
/* Need to attach the previously uploaded file here for resubmission */
<input class="file" id="csvfile" name="csvfile" type="file" value="{{$file['csvfile']['tmp_name']}}" />
You cannot automatically resend user files so I would do it this way:
When user sends form if any file is provided you save file in some directory (you treat it as temporary) and save file name/names to session and show user preview of file
When he clicks continue - you can do with other data whatever you want (for example save it to database or show as hidden in another form) and you still have uploaded filename in session so if you want you may even again show file preview
When you want to finally save all user data you move user file/files to final directory (and possible rename it) and save all the data with file(s) name (probably in database).
As addition you should have some kind of cron that removes data from your temporary directory that very created for example more than 3 hours
I have a button that allows a user to select an image - shown below:
<div id="fileUpload">
<form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data">
<input type="file" id="file"/>
</form>
<div id="fakefile">
<img src="../../images/button-grey-enhanced.png" id="usePhotoSubmit" alt="BROWSE for Photo">
<span id="usePhoto">BROWSE</span>
</div>
</div>
I then need to upload the image to the server and display the image on the same page without a page refresh. I've tried the following:
$('input#file').change(function() {
$('form#joinPhotoUploadForm').submit();
});
Any advise on how I can get the image upload and displayed on the same page without a page refresh?
thx
You could use the FileReader and File API available in modern browsers to read the file client side before uploading it and display a preview then allow the user upload after they've verified the preview. You can also implement drag and drop with an image from their desktop to the browser instead of a traditional file select input.
Here is a tutorial for it: http://www.html5rocks.com/en/tutorials/file/dndfiles/
In older browsers you can just fall back to a traditional file input with a page reload.
you can try the solution provided in this tutorial
http://www.youtube.com/course?list=EC7C25B2F18F68F3EF&feature=plcp
Have you considered a fancy uploader like Uploadify or Pupload?
I am using nginx upload module (http://www.grid.net.ru/nginx/upload.en.html) with this plugin https://github.com/drogus/jquery-upload-progress to upload files on my server successfully with progressbar. here is my form:
<form id="upload" enctype="multipart/form-data" action="/upload/" method="post">
<input type="file" name="file_1">
<input type="submit" value="Upload">
</form>
Now i wants to use an option to download remote files with progressbar so my form is this:
<form id="download" action="/upload/" method="post">
<textarea rows="2" cols="20" name="links"></textarea>
<input type="submit" value="Upload">
</form>
So if i give a file i.e http://domain.com/file.zip in links textarea and after hit submit it should display me progressbar for downloading files.
I notice from my first upload method there is some data being generated from a link (http://domain.com/progress?X-Progress-ID=0c1ecb6da3f3ffc3848ceb337541ab1d) like this for files being uploaded but i am not sure if i can use this to show download progressbar:
new Object({ 'state' : 'uploading', 'received' : 674808, 'size' : 2028876 } )
Thank you for any help.
Best Regards
EDIT FIX
Found the solution here, https://gist.github.com/1030450 need to use curl, save the progress in file then call with ajax to get current progress...will post my solution later on :)
Found the solution here, https://gist.github.com/bdunogier/1030450 need to use curl, saved the progress in file then called with ajax to get current progress.
I have used a input file code to upload image to my wallpaper site..
<input type="file" name="img" id="img" />
Is there anyway to select a image without selecting image file..like entering URL to text box?
<input name="img" type="text" id="img" value="http://www.somesite.com/image.my.jpg" size="40" />
I tried its not working...please help me! Anyway to enter image url to text box except select browse button and selecting image file? help me i tries in different ways...
Is there anyway to user type="text" excepts type="file" so We can enter image url in that text box and upload?
With that <input> you then have to tell your PHP code to go and download that file e.g.
<?php
if (!empty($_POST['img'])) {
file_put_contents('savedImage',file_get_contents($_POST['img']));
}
However doing so opens you up to some potential security issues, so be careful!
I think what you want to do is upload an image and then display that on a page.
You need to move the image into a folder on your webserver then display that output.
More info about it here.
What I want
I want to upload a file without reloading the page, also I want to add the source link for the image to the textarea.
So when I push the upload_photo, the image uploads and a link is added to the textarea.
I want pure HTML, Javascript|AJAX and PHP.
What I have
<form action"index.php" method="post" enctype="multipart/form-data">
<textarea id="textarea" name="text"></textarea>
<input type="file" name="photo" />
<input type="submit" name="upload_photo"/>
<input type="submit" name="post"/>
</form>
Example sites:
http://www.friendfeed.com - the page don't reloads when you upload the files
What I don't want
Please avoid posting solutions with jQuery or any library, API.
That's easy.
Put an iframe, give it a name, for example "MyIframe".
Then in the form, add the TARGET attribute, with the value "MyIframe", and the action - the script that takes the upload (takeupload.php for example)
In the main page define a Javascript function that does something you need after the upload is done, which will be called, with parameters, from the page generated by takeupload.php.
in takeupload.php upload the image, then send as an output a normal blank HTML page that will execute a script which will call the method described above, with a set of parameters you need (image name, path, error, or plain HTML to insert somewhere, etc.).
use it like this:
<script type="text/javascript">
parent.YourJSMethod(parameters);
</script>
The page will be loaded in the iframe, and it will run a function defined outside the iframe. Upload is done, and the parent page receives data about the result.
This is fairly simple. No jQuery needed, no AJAX, no nothing, just a very simple Javascript code and a little HTML.
This can indeed be done with AJAX. I don't think that using AJAX is any more of a security risk than sending a vanilla HTML form; you will have to validate all user input on the server side all the same. Here's a simple example:
http://www.webtoolkit.info/ajax-file-upload.html