Codeigniter is on version 3.1.13.
PHP is on version 7.4.
I did not make this site, but I have to maintain this legacy site for another year. My host recently did a PHP upgrade from 5.4 to 7.x and since then, I am no longer able to upload files in my codeignter site using uploadify. It use to show a file <input> that would allow you to select and upload files. Since the upgrade, the input has been missing. Checking the site in dev tools shows the input is there but it has an inline style with display:none attached.
<input id="userfile" name="userfile" type="file" style="display: none;">
I have scoured through all the javascript files, controllers, everything looking for where this style is being applied. The source code doesn’t have the style attribute.
<div class="upload-container">
<?= form_open_multipart('upload/do_upload', array('id' => 'img-upload')); ?>
<fieldset>
<legend>Upload an Image</legend>
<h5 class="upload_h5">Upload Images:</h5>
<?= image_asset('bg_no_img.gif', '', array('class' => 'pad_10' . $image_class)); ?>
<input id="userfile" name="userfile" type="file" />
<p><a class="btn_upload" rel="userfile" href="#">Upload</a> <a class="btn_clear" rel="userfile"
href="#">Clear Queue</a></p>
</fieldset>
<span class="clearFix"> </span>
</form>
</div>
I’m fairly certain it has to do with the php upgrade, but I’m not sure why or how to fix. Here is the uploadify function:
$('#userfile').uploadify({
'uploader': global.base + 'assets/_js/uploadify.swf',
'script': global.base + 'upload/do_upload',
'scriptData': {
'type': global.section
},
'cancelImg': global.base + 'assets/_images/cancel.png',
'buttonImg': global.base + 'assets/_images/bt-browse.gif',
'auto': false,
'multi': true,
'scriptAccess': 'always',
'wmode': 'transparent',
'fileExt': '*.jpg;*.gif;*.png',
'fileDesc': 'image files',
'onSelectOnce': function() {
$('#img-upload a.btn_upload, #img-upload a.btn_clear').show();
},
'onCancel': function(e, qID, f, d) {
if (d.fileCount == 0) $('#img-upload a.btn_upload, #img-upload a.btn_clear').hide();
},
'onComplete': add_pics,
//'onError' : show_error,
'onAllComplete': function() {
$.post(global.base + 'process/keep_login', { user : global.email });
$('#img-upload a.btn_upload, #img-upload a.btn_clear').hide();
}
});
It’s been years since I’ve worked with php, and I’ve never personally used uploadify. Am I missing something? I’m unable to downgrade back to php 5 with my host. Why is this input getting the style attribute applied with display:none ?
EDIT: I noticed that the uploadify function references assets/_js/uploadify.swf, which is flash. I’m guessing since flash isn’t supported anymore that is why it won’t work. Is there an easy replacement? I’m thinking I won’t have to change my doUpload function, just manage the input differently?
EDIT: Using dev tools, I removed the display:none style from the input, and when I tried to select a file and click upload I get the error: /assets/_js/admin.js. Which looks like this:
$('a.btn_upload').click(function() {
var up_action = $(this).attr('rel');
$('#' + up_action).uploadifyUpload(); /* this is line 270 */
return false;
});
.uploadifyUpload function is in jquery.upload.js file and looks like this:
uploadifyUpload: function(b) {
a(this).each(function() {
document.getElementById(a(this).attr("id") + "Uploader").startFileUpload(b, false)
})
}
2
Answers
The old version of uploadify relies on Flash. When the browser has no
Flash support (which is the case for all current browsers), then the input element is hidden. That behavior
is described here.
It means that your file upload feature has been broken for quite some time now, and is not due to the PHP upgrade.
A solution to fix it is to use the new version of uploadify, which is based
on HTML5. You will need to adapt your code though.
It seems that your CodeIgniter site has a different behavior towards this button depending on the PHP version you use. You can confirm this by setting up the same site at you locally with the old PHP version and see whether the button appears. Based on what you told us, it’s very likely that you would see the button appear but not working due to its reliance on Flash.
Then, you can try enabling Flash in your browser and I predict that the button will likely appear on the page after you do.
So, you have the following options:
Since you are only to maintain this site for a year, understandably you want to have a solution that requires minimal effort. Since it’s only an uploader, I would implement my own code to do the upload, because this feature tends to be easy to be implemented (see https://www.freecodecamp.org/news/upload-files-with-javascript/), of course, you will need to make it so that it’s compatible with the server, possibly inspiring from the old Flash code.
The upgrade of Uploadify might cause some behavioral changes on the site, especially if other features also rely on it. So, if you choose this path, then I advise you to be very cautious and test the site with the upgraded resource on a dev environment very thoroughly.
Finally, if your users already use Flash in their browser, then it is possible that you can get away without changing this for a year. But you will also need to make sure that you are on the right track, to make sure you avoid doing nothing while a key feature is non-functional for the users.