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)
})
}
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.