I have an upload page in my codeigniter app and when i upload an image and click submit it redirects to a page called 'upload_success' i want to show the image you just uploaded on that page.
How can i do that?
I used
<script language="javascript">
function reload(){window.location.reload();}
</script>
but then it uploads the image two times.
NOTE: i am using Ci's file uploader class.
See CI's File Uploading Class.
If going by their controller example, on success this code is executed:
$data = array('upload_data' => $this->upload->data());
$this->load->view('upload_success', $data);
The image information is in the $data passed to the view, so in the upload_success view, you need to set something like:
<img src="http://mysite.com/path/to/uploads/<?php echo $upload_data['file_name']; ?>" />
Is upload_success also the page that does the upload? because if it is then that is bad architecture because every time user refreshes that page the image will be uploaded again and again.
What you need to do is, on form submit call a script like image_upload which only does the upload then redirects to upload_success which shows message (success/failure) and in that page add an <img> tag which has its src set to the previously uploaded image.
Related
I would like my user to upload a file to my laravel site, submit the file, then be able to download that same file by clicking a link on another page. I know how to do everything except give the file name to the route specified on my html download link.
When a user uploads a file, their file is named by laravel using storeAs() to file1.png. The next file uploaded is file2.png, then file3.png, etc. The user presses submit to store the file and is taken to a page view.blade.php. On this view.blade.php, I'd like for there to be a link that they can click and download the file they just uploaded.
Here is the code in my view.blade.php file:
Download a file!
<br>
Pic name = <?= $fileName ?>
Here is my "/downloader" route:
Route::get('/downloader', function() {
return response()->download('../storage/app/uploads/'.$fileName);
});
From that html code, $fileName correctly prints the file name, so I know view.blade.php has the correct variable. I know the issue is that my routes file does not receive this variable $fileName, but I do not know how to pass this variable from this view.blade.php into the html download link so that my route can have the variable as well.
Here's how you do it:
<a href="/downloader/{{ $filename }}"/>
But in order to be able to use the $filename variable above, you have to pass info about it via ViewData/ViewBag.
You do that simply by doing view()->with(["filename" => "thefile.png"]); in the route or controller.
And for the download route:
Route::get('/downloader/{filename}', function($filename) {
return response()->download('../storage/app/uploads/'.$filename);
});
PS: This isn't the safest approach - it's highly suggested to add some form of verification, perhaps an alphanumeric token before file name.
I have created an html form that contact text input fields as well as file input for image uploads. I have already created the submit.php that handles the image file uploaded as well as other text inputs that are typed in by the users and this php file works fine. However, I have also added an option for the user to preview form in the html form page so if they want to preview the form first before submitting it, they are taken to the form_preview.php page that shows them the preview of the completed form along with the forms beneath this preview so they can edit it further if they want. In this preview page, I am having a problem in showing a preview of the uploaded image before uploading it.
Here is my code and on info on what I've tried so far: In the form_preview.php page, I have the following:
<h1>Form Preview:</h1>
<p>Intro: <?php echo $_POST["intro"]; ?> </p>
<p>My Story: <?php echo $_POST["story"]; ?> </p>
<img src="<?php echo $_FILES["file"]["tmp_name"]; ?>" />
The above shows a broken image instead of showing an image. I thought the uploaded image will be stored in a temporary folder and if I added the $_FILES["file"]["tmp_name"]; as the image source it may show that image. Since its not showing, does it mean that this will not work? So is my only other option for this is to process the upload and store in the 'upload' folder first (similar to what I do in the submit.php file) and then add the link to the actual image that was added to this upload folder?
I've a front-end form with a file input where anybody (no registered users) can upload an image that will be attached to a custom meta field in the back-end. To preview the image I'm using the old iframe technique. My form looks like this:
<form id="upload-photo" method="post" target="preview-iframe" action="<?= get_template_directory_uri() ?>/inc/upload.php" enctype="multipart/form-data" >
<div id="preview"><img src="" alt="" /></div>
<iframe id="preview-iframe" name="preview-iframe" src=""></iframe>
<input type="file" name="author_photo" />
<input type="hidden" id="attachment" name="attachment" value=""/>
<button type="submit" id="upload">Upload</button>
</form>
Then I use WordPress built-in functions to handle the upload and move the file into the media gallery. I use the hidden field to store the WordPress id of the attachment so if users decide to change the picture by uploading a new one then the old one would get removed. This is my PHP:
<?php
define('WP_USE_THEMES', false);
require_once '../../../../wp-load.php';
require_once(ABSPATH .'wp-admin/includes/image.php');
require_once(ABSPATH .'wp-admin/includes/file.php');
require_once(ABSPATH .'wp-admin/includes/media.php');
if (isset($_POST['attachment'])) {
wp_delete_attachment($_POST['attachment'], true);
}
foreach ($_FILES as $file => $data) {
if ($data['error'] === UPLOAD_ERR_OK) {
$attachment = media_handle_upload($file, null);
}
}
echo wp_get_attachment_image($attachment, 'author', 0, array('id' => $attachment));
?>
And finally the jQuery that glues it all together:
var $preview = $('#preview'),
$iframe = $('#preview-iframe'),
$attachment = $('#attachment');
$('#upload').click(function() {
$iframe.load(function() {
var img = $iframe.contents().find('img')[0];
$preview.find('img').attr('src', img.src);
$attachment.val(img.id);
});
});
Everything works perfect but there are few issues with this simple approach:
If JavaScript is disabled images don't get removed
If the user uploads a file then refreshes the site and then uploads and other image, then the previous one wouldn't get deleted because the previous attachment ID doesn't exist due to the refresh.
A malicious user could edit the hidden attachment field with a different ID.
I though about uploading the files to a /temp folder for previewing purposes only and then run a cron job every X time to empty it out. But how do I then make use of WordPress functions to move the image from /temp to the gallery once the whole form has been submitted so I can get and attachment id to link to the post?
Notice that I've two forms, one for handling the image, and the global form with all the content that will be posted and that already works since I can post the new post as "draft" and admins have the power to decide. But how to do this for images securely? How to preview an image and put it in the gallery only if the form has been posted successfully?
I know about the FileReader API but I need compatibility for IE8+ so that won't do. I'm also aware of all the Flash and Silverlight solutions but that's not an option either. Also please don't just link to WordPress plugins, I'm trying to learn here.
Ok, it seems I'm answering my own questions again. This is how I solved it. I found a WordPress function media_handle_sideload that lets you upload files from other locations and not only files from the $_FILES array like the previous function.
So I went with my initial approach now that I know about that function. I basically upload the file to a /temp folder for preview purposes and give it a unique id that I store into the hidden field. When the user submits the overall form and passes validation I take the ID that was stored and find out if the file exists and if so I move it to the gallery. This solves most of my concerns about security because even if a malicious user finds an existing unique ID (unlikely but possible) the file wouldn't get removed like before, but just moved into the gallery (not a big deal).
Finally I set-up a cron job to empty out the temp folder every X amount of time.
I have a script to upload an image and display it. When i choose an image and click upload, it doesn't update the current image, but if i press f5 it will change the current image... thank you very much in advance. im just new in php.
<br><br><input type='submit' name=save value=save onClick='alert(\"Profile Updated!\")'><input type='hidden' name='id' value=$id>";
your browser is probably reusing the cached image, the best way to fix this is to add a unique tag at the end of the image url e.g.
in php i would generally have some kind of helper to do this e.g(very basic):
**
function image_tag($url,$attrs){
$id = abs((int)(microtime(true)*1000)) ); //bit overkill
return '<img src="'.$url.'?'.$id.'" '.$attrs.' />';
}
echo image_tag('some_url.jpeg',' class="my_image_class" ');
**
if you are updating the image with javascript try do something like the following:
**$('#some_img').attr('src',some_url+'?'+(+new Date()));**
should do the trick
can you display image like ??
if yes then you have to append time() so it will loaded properly for example display image like ">
if you just upload image using AJAX then get back image data and fill in to image object.
Here you use profile.php page for upload image so after that you have to redirect that page or reload.
for example after upload image put code header('location:index.php?msg=imageuploaded');
I have a image upload form which adds an image to my server, although I'm wanting to load the information through jQuery ajax so the form doesn't refresh on submit.
At the moment I have
$('.img-form').submit(function(e) {
e.preventDefault();
$.post(document.href, $(".img-form").serialize());
});
Which seems to post the document, although i need to get it to call my ImageUpload() function from the PHP once I've pressed the submit.
My php function is called something like this,
<?php $Users->TutorialImageUpload(); ?>
If I understood correctly, you wish to upload an image without refreshing the page, and call your imageUpload() function.
As mentioned in the comments, you cannot upload in such a manner, however, what you could do
is put your upload form and code in a seperate php file and include it in the page as an iframe. This would upload your files withough refreshing the page.